/*! @algolia/autocomplete-theme-classic 1.19.1 | MIT License | © Algolia, Inc. and contributors | https://github.com/algolia/autocomplete */
@layer reset {
  *, :before, :after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
  }

  img, picture, video, canvas, svg {
    max-width: 100%;
    display: block;
  }

  input, button, textarea, select {
    font: inherit;
  }

  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }

  button {
    border: none;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  p {
    text-wrap: pretty;
  }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
  }

  #root, #__next {
    isolation: isolate;
  }

  [hidden] {
    display: none !important;
  }
}

@layer base {
  :root {
    --gray-950: #161616;
    --gray-900: #262626;
    --gray-800: #393939;
    --gray-700: #525252;
    --gray-600: #6f6f6f;
    --gray-500: #8d8d8d;
    --gray-400: #a8a8a8;
    --gray-300: #c6c6c6;
    --gray-200: #d3d3d3;
    --gray-100: #e0e0e0;
    --gray-50: #f4f4f4;
    --red-950: #2d0709;
    --red-900: #520408;
    --red-800: #750e13;
    --red-700: #a2191f;
    --red-600: #da1e28;
    --red-500: #fa4d56;
    --red-400: #ff8389;
    --red-300: #ffb3b8;
    --red-200: #ffc5c9;
    --red-100: #ffd7d9;
    --red-50: #fff1f1;
    --orange-950: #231000;
    --orange-900: #3e1a00;
    --orange-800: #5e2900;
    --orange-700: #8a3800;
    --orange-600: #ba4e00;
    --orange-500: #eb6200;
    --orange-400: #ff832b;
    --orange-300: #ffb784;
    --orange-200: #ffc8a2;
    --orange-100: #ffd9be;
    --orange-50: #fff2e8;
    --yellow-950: #1c1500;
    --yellow-900: #302400;
    --yellow-800: #483700;
    --yellow-700: #684e00;
    --yellow-600: #8e6a00;
    --yellow-500: #b28600;
    --yellow-400: #d2a106;
    --yellow-300: #f1c21b;
    --yellow-200: #f9cf2e;
    --yellow-100: #fddc69;
    --yellow-50: #fcf4d6;
    --green-950: #071908;
    --green-900: #022d0d;
    --green-800: #044317;
    --green-700: #0e6027;
    --green-600: #198038;
    --green-500: #24a148;
    --green-400: #42be65;
    --green-300: #6fdc8c;
    --green-200: #89e7a2;
    --green-100: #a7f0ba;
    --green-50: #defbe6;
    --teal-950: #081a1c;
    --teal-900: #022b30;
    --teal-800: #004144;
    --teal-700: #005d5d;
    --teal-600: #007d79;
    --teal-500: #009d9a;
    --teal-400: #08bdba;
    --teal-300: #3ddbd9;
    --teal-200: #74e6e5;
    --teal-100: #9ef0f0;
    --teal-50: #d9fbfb;
    --purple-950: #1c0f30;
    --purple-900: #31135e;
    --purple-800: #491d8b;
    --purple-700: #6929c4;
    --purple-600: #8a3ffc;
    --purple-500: #a56eff;
    --purple-400: #be95ff;
    --purple-300: #d4bbff;
    --purple-200: #decaff;
    --purple-100: #e8daff;
    --purple-50: #f6f2ff;
    --color-red-50: oklch(97.1% .013 17.38);
    --color-red-100: oklch(93.6% .032 17.717);
    --color-red-200: oklch(88.5% .062 18.334);
    --color-red-300: oklch(80.8% .114 19.571);
    --color-red-400: oklch(70.4% .191 22.216);
    --color-red-500: oklch(63.7% .237 25.331);
    --color-red-600: oklch(57.7% .245 27.325);
    --color-red-700: oklch(50.5% .213 27.518);
    --color-red-800: oklch(44.4% .177 26.899);
    --color-red-900: oklch(39.6% .141 25.723);
    --color-red-950: oklch(25.8% .092 26.042);
    --color-orange-50: oklch(98% .016 73.684);
    --color-orange-100: oklch(95.4% .038 75.164);
    --color-orange-200: oklch(90.1% .076 70.697);
    --color-orange-300: oklch(83.7% .128 66.29);
    --color-orange-400: oklch(75% .183 55.934);
    --color-orange-500: oklch(70.5% .213 47.604);
    --color-orange-600: oklch(64.6% .222 41.116);
    --color-orange-700: oklch(55.3% .195 38.402);
    --color-orange-800: oklch(47% .157 37.304);
    --color-orange-900: oklch(40.8% .123 38.172);
    --color-orange-950: oklch(26.6% .079 36.259);
    --color-amber-50: oklch(98.7% .022 95.277);
    --color-amber-100: oklch(96.2% .059 95.617);
    --color-amber-200: oklch(92.4% .12 95.746);
    --color-amber-300: oklch(87.9% .169 91.605);
    --color-amber-400: oklch(82.8% .189 84.429);
    --color-amber-500: oklch(76.9% .188 70.08);
    --color-amber-600: oklch(66.6% .179 58.318);
    --color-amber-700: oklch(55.5% .163 48.998);
    --color-amber-800: oklch(47.3% .137 46.201);
    --color-amber-900: oklch(41.4% .112 45.904);
    --color-amber-950: oklch(27.9% .077 45.635);
    --color-yellow-50: oklch(98.7% .026 102.212);
    --color-yellow-100: oklch(97.3% .071 103.193);
    --color-yellow-200: oklch(94.5% .129 101.54);
    --color-yellow-300: oklch(90.5% .182 98.111);
    --color-yellow-400: oklch(85.2% .199 91.936);
    --color-yellow-500: oklch(79.5% .184 86.047);
    --color-yellow-600: oklch(68.1% .162 75.834);
    --color-yellow-700: oklch(55.4% .135 66.442);
    --color-yellow-800: oklch(47.6% .114 61.907);
    --color-yellow-900: oklch(42.1% .095 57.708);
    --color-yellow-950: oklch(28.6% .066 53.813);
    --color-lime-50: oklch(98.6% .031 120.757);
    --color-lime-100: oklch(96.7% .067 122.328);
    --color-lime-200: oklch(93.8% .127 124.321);
    --color-lime-300: oklch(89.7% .196 126.665);
    --color-lime-400: oklch(84.1% .238 128.85);
    --color-lime-500: oklch(76.8% .233 130.85);
    --color-lime-600: oklch(64.8% .2 131.684);
    --color-lime-700: oklch(53.2% .157 131.589);
    --color-lime-800: oklch(45.3% .124 130.933);
    --color-lime-900: oklch(40.5% .101 131.063);
    --color-lime-950: oklch(27.4% .072 132.109);
    --color-green-50: oklch(98.2% .018 155.826);
    --color-green-100: oklch(96.2% .044 156.743);
    --color-green-200: oklch(92.5% .084 155.995);
    --color-green-300: oklch(87.1% .15 154.449);
    --color-green-400: oklch(79.2% .209 151.711);
    --color-green-500: oklch(72.3% .219 149.579);
    --color-green-600: oklch(62.7% .194 149.214);
    --color-green-700: oklch(52.7% .154 150.069);
    --color-green-800: oklch(44.8% .119 151.328);
    --color-green-900: oklch(39.3% .095 152.535);
    --color-green-950: oklch(26.6% .065 152.934);
    --color-emerald-50: oklch(97.9% .021 166.113);
    --color-emerald-100: oklch(95% .052 163.051);
    --color-emerald-200: oklch(90.5% .093 164.15);
    --color-emerald-300: oklch(84.5% .143 164.978);
    --color-emerald-400: oklch(76.5% .177 163.223);
    --color-emerald-500: oklch(69.6% .17 162.48);
    --color-emerald-600: oklch(59.6% .145 163.225);
    --color-emerald-700: oklch(50.8% .118 165.612);
    --color-emerald-800: oklch(43.2% .095 166.913);
    --color-emerald-900: oklch(37.8% .077 168.94);
    --color-emerald-950: oklch(26.2% .051 172.552);
    --color-teal-50: oklch(98.4% .014 180.72);
    --color-teal-100: oklch(95.3% .051 180.801);
    --color-teal-200: oklch(91% .096 180.426);
    --color-teal-300: oklch(85.5% .138 181.071);
    --color-teal-400: oklch(77.7% .152 181.912);
    --color-teal-500: oklch(70.4% .14 182.503);
    --color-teal-600: oklch(60% .118 184.704);
    --color-teal-700: oklch(51.1% .096 186.391);
    --color-teal-800: oklch(43.7% .078 188.216);
    --color-teal-900: oklch(38.6% .063 188.416);
    --color-teal-950: oklch(27.7% .046 192.524);
    --color-cyan-50: oklch(98.4% .019 200.873);
    --color-cyan-100: oklch(95.6% .045 203.388);
    --color-cyan-200: oklch(91.7% .08 205.041);
    --color-cyan-300: oklch(86.5% .127 207.078);
    --color-cyan-400: oklch(78.9% .154 211.53);
    --color-cyan-500: oklch(71.5% .143 215.221);
    --color-cyan-600: oklch(60.9% .126 221.723);
    --color-cyan-700: oklch(52% .105 223.128);
    --color-cyan-800: oklch(45% .085 224.283);
    --color-cyan-900: oklch(39.8% .07 227.392);
    --color-cyan-950: oklch(30.2% .056 229.695);
    --color-sky-50: oklch(97.7% .013 236.62);
    --color-sky-100: oklch(95.1% .026 236.824);
    --color-sky-200: oklch(90.1% .058 230.902);
    --color-sky-300: oklch(82.8% .111 230.318);
    --color-sky-400: oklch(74.6% .16 232.661);
    --color-sky-500: oklch(68.5% .169 237.323);
    --color-sky-600: oklch(58.8% .158 241.966);
    --color-sky-700: oklch(50% .134 242.749);
    --color-sky-800: oklch(44.3% .11 240.79);
    --color-sky-900: oklch(39.1% .09 240.876);
    --color-sky-950: oklch(29.3% .066 243.157);
    --color-blue-50: oklch(97% .014 254.604);
    --color-blue-100: oklch(93.2% .032 255.585);
    --color-blue-200: oklch(88.2% .059 254.128);
    --color-blue-300: oklch(80.9% .105 251.813);
    --color-blue-400: oklch(70.7% .165 254.624);
    --color-blue-500: oklch(62.3% .214 259.815);
    --color-blue-600: oklch(54.6% .245 262.881);
    --color-blue-700: oklch(48.8% .243 264.376);
    --color-blue-800: oklch(42.4% .199 265.638);
    --color-blue-900: oklch(37.9% .146 265.522);
    --color-blue-950: oklch(28.2% .091 267.935);
    --color-indigo-50: oklch(96.2% .018 272.314);
    --color-indigo-100: oklch(93% .034 272.788);
    --color-indigo-200: oklch(87% .065 274.039);
    --color-indigo-300: oklch(78.5% .115 274.713);
    --color-indigo-400: oklch(67.3% .182 276.935);
    --color-indigo-500: oklch(58.5% .233 277.117);
    --color-indigo-600: oklch(51.1% .262 276.966);
    --color-indigo-700: oklch(45.7% .24 277.023);
    --color-indigo-800: oklch(39.8% .195 277.366);
    --color-indigo-900: oklch(35.9% .144 278.697);
    --color-indigo-950: oklch(25.7% .09 281.288);
    --color-violet-50: oklch(96.9% .016 293.756);
    --color-violet-100: oklch(94.3% .029 294.588);
    --color-violet-200: oklch(89.4% .057 293.283);
    --color-violet-300: oklch(81.1% .111 293.571);
    --color-violet-400: oklch(70.2% .183 293.541);
    --color-violet-500: oklch(60.6% .25 292.717);
    --color-violet-600: oklch(54.1% .281 293.009);
    --color-violet-700: oklch(49.1% .27 292.581);
    --color-violet-800: oklch(43.2% .232 292.759);
    --color-violet-900: oklch(38% .189 293.745);
    --color-violet-950: oklch(28.3% .141 291.089);
    --color-purple-50: oklch(97.7% .014 308.299);
    --color-purple-100: oklch(94.6% .033 307.174);
    --color-purple-200: oklch(90.2% .063 306.703);
    --color-purple-300: oklch(82.7% .119 306.383);
    --color-purple-400: oklch(71.4% .203 305.504);
    --color-purple-500: oklch(62.7% .265 303.9);
    --color-purple-600: oklch(55.8% .288 302.321);
    --color-purple-700: oklch(49.6% .265 301.924);
    --color-purple-800: oklch(43.8% .218 303.724);
    --color-purple-900: oklch(38.1% .176 304.987);
    --color-purple-950: oklch(29.1% .149 302.717);
    --color-fuchsia-50: oklch(97.7% .017 320.058);
    --color-fuchsia-100: oklch(95.2% .037 318.852);
    --color-fuchsia-200: oklch(90.3% .076 319.62);
    --color-fuchsia-300: oklch(83.3% .145 321.434);
    --color-fuchsia-400: oklch(74% .238 322.16);
    --color-fuchsia-500: oklch(66.7% .295 322.15);
    --color-fuchsia-600: oklch(59.1% .293 322.896);
    --color-fuchsia-700: oklch(51.8% .253 323.949);
    --color-fuchsia-800: oklch(45.2% .211 324.591);
    --color-fuchsia-900: oklch(40.1% .17 325.612);
    --color-fuchsia-950: oklch(29.3% .136 325.661);
    --color-pink-50: oklch(97.1% .014 343.198);
    --color-pink-100: oklch(94.8% .028 342.258);
    --color-pink-200: oklch(89.9% .061 343.231);
    --color-pink-300: oklch(82.3% .12 346.018);
    --color-pink-400: oklch(71.8% .202 349.761);
    --color-pink-500: oklch(65.6% .241 354.308);
    --color-pink-600: oklch(59.2% .249 .584);
    --color-pink-700: oklch(52.5% .223 3.958);
    --color-pink-800: oklch(45.9% .187 3.815);
    --color-pink-900: oklch(40.8% .153 2.432);
    --color-pink-950: oklch(28.4% .109 3.907);
    --color-rose-50: oklch(96.9% .015 12.422);
    --color-rose-100: oklch(94.1% .03 12.58);
    --color-rose-200: oklch(89.2% .058 10.001);
    --color-rose-300: oklch(81% .117 11.638);
    --color-rose-400: oklch(71.2% .194 13.428);
    --color-rose-500: oklch(64.5% .246 16.439);
    --color-rose-600: oklch(58.6% .253 17.585);
    --color-rose-700: oklch(51.4% .222 16.935);
    --color-rose-800: oklch(45.5% .188 13.697);
    --color-rose-900: oklch(41% .159 10.272);
    --color-rose-950: oklch(27.1% .105 12.094);
    --color-slate-50: oklch(98.4% .003 247.858);
    --color-slate-100: oklch(96.8% .007 247.896);
    --color-slate-200: oklch(92.9% .013 255.508);
    --color-slate-300: oklch(86.9% .022 252.894);
    --color-slate-400: oklch(70.4% .04 256.788);
    --color-slate-500: oklch(55.4% .046 257.417);
    --color-slate-600: oklch(44.6% .043 257.281);
    --color-slate-700: oklch(37.2% .044 257.287);
    --color-slate-800: oklch(27.9% .041 260.031);
    --color-slate-900: oklch(20.8% .042 265.755);
    --color-slate-950: oklch(12.9% .042 264.695);
    --color-gray-50: oklch(98.5% .002 247.839);
    --color-gray-100: oklch(96.7% .003 264.542);
    --color-gray-200: oklch(92.8% .006 264.531);
    --color-gray-300: oklch(87.2% .01 258.338);
    --color-gray-400: oklch(70.7% .022 261.325);
    --color-gray-500: oklch(55.1% .027 264.364);
    --color-gray-600: oklch(44.6% .03 256.802);
    --color-gray-700: oklch(37.3% .034 259.733);
    --color-gray-800: oklch(27.8% .033 256.848);
    --color-gray-900: oklch(21% .034 264.665);
    --color-gray-950: oklch(13% .028 261.692);
    --color-zinc-50: oklch(98.5% 0 0);
    --color-zinc-100: oklch(96.7% .001 286.375);
    --color-zinc-200: oklch(92% .004 286.32);
    --color-zinc-300: oklch(87.1% .006 286.286);
    --color-zinc-400: oklch(70.5% .015 286.067);
    --color-zinc-500: oklch(55.2% .016 285.938);
    --color-zinc-600: oklch(44.2% .017 285.786);
    --color-zinc-700: oklch(37% .013 285.805);
    --color-zinc-800: oklch(27.4% .006 286.033);
    --color-zinc-900: oklch(21% .006 285.885);
    --color-zinc-950: oklch(14.1% .005 285.823);
    --color-neutral-50: oklch(98.5% 0 0);
    --color-neutral-100: oklch(97% 0 0);
    --color-neutral-200: oklch(92.2% 0 0);
    --color-neutral-300: oklch(87% 0 0);
    --color-neutral-400: oklch(70.8% 0 0);
    --color-neutral-500: oklch(55.6% 0 0);
    --color-neutral-600: oklch(43.9% 0 0);
    --color-neutral-700: oklch(37.1% 0 0);
    --color-neutral-800: oklch(26.9% 0 0);
    --color-neutral-900: oklch(20.5% 0 0);
    --color-neutral-950: oklch(14.5% 0 0);
    --color-stone-50: oklch(98.5% .001 106.423);
    --color-stone-100: oklch(97% .001 106.424);
    --color-stone-200: oklch(92.3% .003 48.717);
    --color-stone-300: oklch(86.9% .005 56.366);
    --color-stone-400: oklch(70.9% .01 56.259);
    --color-stone-500: oklch(55.3% .013 58.071);
    --color-stone-600: oklch(44.4% .011 73.639);
    --color-stone-700: oklch(37.4% .01 67.558);
    --color-stone-800: oklch(26.8% .007 34.298);
    --color-stone-900: oklch(21.6% .006 56.043);
    --color-stone-950: oklch(14.7% .004 49.25);
    --color-black: #000;
    --color-white: #fff;
  }

  :root {
    --text-white: #f8f9fa;
    --text-primary: var(--gray-950);
    --text-secondary: var(--gray-800);
    --text-placeholder: var(--gray-600);
    --brand-red-light: var(--red-600);
    --brand-red: var(--red-800);
    --brand-red-dark: var(--red-950);
    --brand-red-overlay: var(--red-50);
    --brand-purple: #4f0341;
    --brand-purple-light: #723567;
    --ms-primary: var(--red-800);
    --ms-secondary: #4f0341;
    --ms-error: var(--red-600);
    --ms-error-filter: var(--red-600-filter);
    --ms-error-dimmed: var(--red-50);
    --button-disabled-color: #947c7c;
    --input-bg-color: white;
    --card-bg-color: #f8f9fa;
    --background-body: #efefef;
    --overlay-bg-color: #00000080;
    --brand-red-light-filter: invert(12%) sepia(48%) saturate(5057%) hue-rotate(351deg) brightness(97%) contrast(117%);
  }

  :root :root {
    --shadow-color: 286deg 36% 56%;
    --shadow-elevation-low: .3px .5px .7px hsl(var(--shadow-color) / .34), .4px .8px 1px -1.2px hsl(var(--shadow-color) / .34), 1px 2px 2.5px -2.5px hsl(var(--shadow-color) / .34);
    --shadow-elevation-medium: .3px .5px .7px hsl(var(--shadow-color) / .36), .8px 1.6px 2px -.8px hsl(var(--shadow-color) / .36), 2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / .36), 5px 10px 12.6px -2.5px hsl(var(--shadow-color) / .36);
    --shadow-elevation-high: .3px .5px .7px hsl(var(--shadow-color) / .34), 1.5px 2.9px 3.7px -.4px hsl(var(--shadow-color) / .34), 2.7px 5.4px 6.8px -.7px hsl(var(--shadow-color) / .34), 4.5px 8.9px 11.2px -1.1px hsl(var(--shadow-color) / .34), 7.1px 14.3px 18px -1.4px hsl(var(--shadow-color) / .34), 11.2px 22.3px 28.1px -1.8px hsl(var(--shadow-color) / .34), 17px 33.9px 42.7px -2.1px hsl(var(--shadow-color) / .34), 25px 50px 62.9px -2.5px hsl(var(--shadow-color) / .34);
  }

  :root {
    --space-3xs: clamp(.3125rem, .3125rem + 0vw, .3125rem);
    --space-2xs: clamp(.5625rem, .5408rem + .1087vw, .625rem);
    --space-xs: clamp(.875rem, .8533rem + .1087vw, .9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + .2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + .3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + .4348vw, 2.5rem);
    --space-xl: clamp(3.375rem, 3.2446rem + .6522vw, 3.75rem);
    --space-2xl: clamp(4.5rem, 4.3261rem + .8696vw, 5rem);
    --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vw, 7.5rem);
    --space-3xs-2xs: clamp(.3125rem, .2038rem + .5435vw, .625rem);
    --space-2xs-xs: clamp(.5625rem, .4321rem + .6522vw, .9375rem);
    --space-xs-s: clamp(.875rem, .7446rem + .6522vw, 1.25rem);
    --space-s-m: clamp(1.125rem, .8641rem + 1.3043vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
    --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vw, 3.75rem);
    --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vw, 5rem);
    --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vw, 7.5rem);
  }

  @font-face {
    font-display: swap;
    font-family: IM Fell English;
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fonts/im-fell-english-v14-latin-regular.woff2") format("woff2");
  }

  @font-face {
    font-display: swap;
    font-family: IM Fell English;
    font-style: italic;
    font-weight: 400;
    src: url("/assets/fonts/im-fell-english-v14-latin-italic.woff2") format("woff2");
  }

  @font-face {
    font-display: swap;
    font-family: IM Fell DW Pica SC;
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fonts/im-fell-dw-pica-sc-v21-latin-regular.woff2") format("woff2");
  }

  :root {
    --step--2: clamp(.6944rem, .6639rem + .1522vw, .8rem);
    --step--1: clamp(.8333rem, .7971rem + .1812vw, .96rem);
    --step-0: clamp(1rem, .9565rem + .2174vw, 1.15rem);
    --step-0-1: clamp(1.1rem, 1.09rem + .2609vw, 1.18rem);
    --step-1: clamp(1.2rem, 1.1478rem + .2609vw, 1.38rem);
    --step-2: clamp(1.44rem, 1.3774rem + .313vw, 1.656rem);
    --step-3: clamp(1.728rem, 1.6529rem + .3756vw, 1.9872rem);
    --step-4: clamp(2.0736rem, 1.9834rem + .4507vw, 2.3846rem);
    --step-5: clamp(2.4883rem, 2.3801rem + .5413vw, 2.8616rem);
    --font-p: "IM Fell English", serif;
    --font-sc: "IM Fell DW Pica SC", serif;
    font-size: 18px;
    font-family: var(--font-p);
    color: var(--text-primary);
    font-style: normal;
    font-weight: 400;
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
  }

  h1 {
    font-size: var(--step-2);
    font-family: var(--font-sc);
  }

  h2 {
    font-size: var(--step-1);
  }

  h3, h4, h5, h6 {
    font-size: var(--step-0);
    font-family: var(--font-sc);
  }

  h4 {
    color: var(--text-secondary);
    font-style: normal;
  }

  p {
    font-size: var(--step-0);
    max-width: 80ch;
  }

  p.dropcap:first-letter {
    color: var(--brand-red);
    font-size: var(--step-3);
    float: left;
    line-height: var(--step-3);
    margin-right: .3rem;
  }

  small {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  .ms-text-bf {
    font-family: var(--font-sc);
  }

  :root {
    --card-border: url("/assets/svg/frame-2.svg") 50 / 10px stretch;
    --frame-border-image: url("/assets/svg/frame.svg") 5 / var(--space-2xs) stretch;
    --manicule-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.0' viewBox='0 0 1260 670'%3E%3Cpath fill='%212529' d='M709 39c-5 1-17 5-33 12-17 7-21 8-34 8a2414 2414 0 0 0-180 26c-15 6-32 10-45 11a139 139 0 0 0-75 31c-14 11-24 16-51 28-13 6-40 15-66 23-17 5-35 12-48 19-17 8-22 10-34 11l-21 2c-24 2-32 1-35-5-4-8-5-30-2-59 2-25 1-46-2-59-5-18-13-31-21-33-4-2-34-1-40 1-7 2-8 5-9 18v67c2 33 2 55 0 79v39l3 33c2 21 2 85 0 111l-4 33a948 948 0 0 0-1 77c4 23 4 24 4 34l-2 28v31c1 13 4 21 7 25 2 2 3 2 14 2l24-2c10-1 15-1 26 1 27 3 37 0 47-10 7-8 10-16 14-32 7-25 10-29 25-28 16 1 30 7 54 20a369 369 0 0 0 50 24c32 15 48 20 65 21 10 0 68-2 85-4l34-6c39-8 48-9 70-11 19-2 33 0 65 9 26 7 32 7 60-1 34-10 61-26 77-46 14-17 17-31 9-40-4-5-10-8-27-15-22-9-35-19-42-31-3-5-3-7-4-18-1-17-3-23-11-28-6-4-13-4-33-3-32 2-42 2-50 1-17-4-38 2-43 12-6 12 0 16 55 34 41 14 51 17 64 24 20 10 25 18 18 28-5 7-26 22-36 25-12 5-26 0-60-16-14-7-30-13-34-13-6 0-22 6-47 18-21 10-23 10-36 10l-48-9c-17-3-26-4-56-2a251 251 0 0 1-157-32l-18-9c-8-3-20-6-33-7-13 0-17-2-24-10-17-18-27-64-31-133-1-41 9-72 28-80l21-4c18-3 17-3 30-14 12-10 15-12 25-13a786 786 0 0 0 80-22c12-7 22-10 46-19 19-6 41-16 63-26 51-24 64-28 91-29 26-1 37-3 88-15l44-10c17-3 32-7 59-16 30-10 35-11 48-12l28-3c24-3 52-4 69-2 18 2 22 2 38-1 19-3 34-4 49-2l26 2c15 1 24 3 37 9 20 9 29 11 70 12h30l10 5c11 5 19 8 25 8l12-3c7-2 10-3 16-3 16 0 37 5 49 12 11 6 19 17 19 24 0 6-12 12-37 19-12 3-15 3-25 3-14 0-20-1-46-9-19-7-34-10-42-9l-14 4c-12 3-14 3-28-4l-11-6h-7l-22 4c-26 4-39 2-82-12-12-3-19-5-39-8-18-3-21-3-29 1s-10 4-34-2c-16-4-17-4-28-4-24 1-42 9-78 33-30 20-38 23-69 27-18 3-31 7-39 13-11 7-11 20 0 29 5 5 11 6 19 5s12-2 26-9c22-11 39-15 58-15 32 0 88 28 99 51 7 13 1 29-12 36-6 3-14 4-26 1-11-1-12-1-35 3l-23 4c-12 1-36 1-55-1-19-1-23-1-37 4-23 8-38 18-38 26 0 7 12 15 29 19 8 2 10 2 25 2l34-2 17-1 9 3c9 3 33 14 42 20 16 10 25 19 30 27 4 7 4 11 0 15-2 2-13 8-24 12-9 4-9 14-1 20 11 8 43 11 63 7 18-4 28-14 32-30 2-12 0-20-8-27l-18-12c-24-14-36-28-38-44 0-9 1-13 6-18l4-3h8c7 0 11 1 21 5 18 7 27 9 37 10 14 1 21-3 26-14 2-4 3-6 3-23l-2-24c-2-8-6-15-10-19l-8-13c-7-13-14-20-30-29-15-8-19-11-22-16-3-6-3-10 2-14 3-3 5-4 10-5 10-2 17-1 29 5 16 8 18 8 39 9 33 2 51 4 91 12a290 290 0 0 0 89-1c19-3 27-1 71 11 32 10 30 9 47 9 32-2 55-10 72-26 14-13 21-27 22-44 1-20-6-33-22-47l-10-7c-9-5-52-14-108-23l-66-8c-17 0-29-2-53-8-27-6-29-7-51-9-29-2-36-3-53-6-24-5-37-6-75-7l-47-2h-36z'/%3E%3C/svg%3E");
    --chevron-down: url("/assets/svg/chevron-down.svg");
  }

  input {
    border-image: var(--frame-border-image);
    padding: var(--space-3xs);
    padding-left: var(--space-2xs);
    font-size: var(--step-0);
    color: var(--text-primary);
    background-color: var(--input-bg-color);
    outline: none;
  }

  input:is(input):focus-visible:not(:is([type="checkbox"], [type="radio"], [type="range"])) {
    box-shadow: 0 0 1px 1px var(--text-primary), inset 0 0 1px 2px var(--text-primary);
    transition: box-shadow .2s;
  }

  input::placeholder {
    font-size: var(--step--1);
  }

  input[type="checkbox"], input[type="radio"] {
    accent-color: var(--brand-red);
  }

  input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
    font-size: var(--step-1);
  }

  input[type="range"] {
    accent-color: var(--brand-red);
    background: var(--brand-red);
  }

  input:user-invalid, input.invalid {
    color: var(--ms-error);
    outline: 2px solid var(--ms-error);
    outline-offset: -3px;
  }

  label {
    row-gap: var(--space-3xs);
    column-gap: var(--space-2xs);
    user-select: none;
    font-size: var(--step--1);
    flex-direction: column;
    display: flex;
  }

  label:has(input[type="radio"]) {
    font-size: var(--step-0);
    flex-direction: row;
    align-items: center;
  }

  label:has(input[type="checkbox"]) {
    flex-direction: row;
    align-items: center;
  }

  label:has(input[type="checkbox"]:focus-visible) {
    outline: 1px solid var(--brand-red-light);
    outline-offset: 2px;
  }

  label:has(input[type="file"]) {
    border-image: var(--frame-border-image);
    font-family: var(--font-sc);
    font-size: var(--step-0);
    cursor: pointer;
    border-image-width: 3px;
    justify-content: center;
    align-items: center;
  }

  label:has(input[type="file"]) input[type="file"] {
    display: none;
  }

  label:has(input[type="color"]) {
    font-size: var(--step--1);
    font-family: var(--font-sc);
    flex-direction: row;
    align-items: center;
  }

  label:has(input[type="color"]) input[type="color"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    background: none;
    margin-left: 3px;
    padding: 0;
  }

  label:has(input:disabled:not([type="hidden"])), label:has(select:disabled) {
    opacity: .5;
  }

  label > small {
    color: var(--text-secondary);
    font-size: var(--step--1);
  }

  label.row {
    align-items: center;
    row-gap: 0;
    column-gap: var(--space-2xs);
    flex-direction: row;
  }

  label.row > span {
    font-style: italic;
  }

  ::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  ::-webkit-color-swatch {
    border: 0;
    border-radius: 0;
  }

  select {
    appearance: none;
    border-image: var(--frame-border-image);
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--step-0);
    color: var(--text-primary);
    background-color: var(--input-bg-color);
    user-select: none;
    background-image: var(--chevron-down);
    background-position: right .75rem center;
    background-repeat: no-repeat;
    background-size: .75rem;
    outline: none;
    margin-top: 2px;
    padding-right: 2rem;
  }

  select:not(:disabled):hover {
    cursor: pointer;
    box-shadow: inset 0 0 1px 2px var(--text-primary);
    transition: box-shadow .2s;
  }

  @media (max-width: 500px) {
    select {
      font-size: var(--step--1);
    }
  }

  a {
    font-style: normal;
    font-weight: 400;
    font-family: var(--font-sc);
    color: var(--text-primary);
    text-decoration: none;
  }

  a.active {
    color: var(--brand-red);
  }

  a:not(.ms-btn):not(.ms-btn-cta):hover {
    color: var(--brand-red);
    cursor: pointer;
    text-decoration: underline;
  }

  a:focus-visible {
    outline-color: var(--brand-red);
  }

  a.manicule:after {
    content: "";
    width: var(--step-0);
    height: var(--step-0);
    margin-left: var(--space-3xs);
    filter: invert();
    background-image: url("/assets/svg/manicule.svg");
    background-position: bottom;
    background-repeat: no-repeat;
    transition: transform .3s;
    display: inline-block;
  }

  @supports selector(:open) {
    details::details-content {
      height: 0;
    }
  }

  details::details-content {
    transition-behavior: allow-discrete;
    transition: height .3s, content-visibility .3s;
  }

  details:open::details-content {
    height: auto;
  }

  details {
    overflow: hidden;
  }

  details > summary {
    cursor: pointer;
    user-select: none;
    outline: none;
    list-style-type: none;
  }

  details > summary > h3 {
    display: inline;
  }

  details > summary::-webkit-details-marker {
    display: none;
  }

  details > summary:before {
    text-align: center;
    content: "+";
    width: 1.2ch;
    margin-right: var(--space-3xs);
    display: inline-block;
  }

  details[open] > summary:before {
    content: "-";
  }

  details > :nth-child(2) {
    padding-top: var(--space-3xs-2xs);
  }

  ul {
    list-style-position: outside;
  }

  ol {
    margin-block: 0;
    margin-inline: 0;
    padding-inline: 0;
  }

  li {
    list-style-image: var(--manicule-svg);
    text-indent: 0;
    padding-left: var(--space-2xs);
  }

  li:not(:last-child) {
    margin-bottom: var(--space-2xs);
  }

  li::marker {
    font-size: 3rem;
    line-height: .3;
  }

  li > ul, li > ol {
    margin-top: var(--space-2xs);
  }

  li.divider {
    background-image: url("/assets/svg/line.svg");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 3px;
    width: 100%;
    height: 3px;
    list-style: none;
  }

  fieldset {
    row-gap: var(--space-xs);
    border-image: url("/assets/svg/frame-2.svg") 27 / 12px;
    flex-direction: column;
    display: flex;
  }

  fieldset > legend {
    width: fit-content;
    font-size: var(--step-0);
    font-family: var(--font-sc);
    user-select: none;
  }

  fieldset label {
    font-size: var(--step--1);
  }

  fieldset label select {
    font-style: normal;
  }

  :root {
    --content-max-width: min(100%, 1400px);
    height: 100%;
  }

  body {
    grid-template-rows: max(100vh, min-content) auto;
    grid-row-gap: var(--space-m);
    font-size: var(--step-0);
    background-color: var(--background-body);
    display: grid;
  }

  body:has(.ms-navigation) {
    grid-template-rows: auto 1fr auto;
  }

  @media (max-width: 800px) {
    body {
      grid-row-gap: var(--space-xs);
    }
  }

  .ms-page-content {
    grid-template-columns: [full-start] var(--space-3xs) [content-start] 1fr [content-end] var(--space-3xs) [full-end];
    width: var(--content-max-width);
    justify-self: center;
    min-height: 700px;
    display: grid;
  }

  .ms-page-content > * {
    grid-column: content;
  }

  textarea {
    resize: vertical;
    border-image: var(--frame-border-image);
    padding: var(--space-3xs);
    padding-left: var(--space-2xs);
    font-size: var(--step--1);
    color: var(--text-primary);
    background-color: var(--input-bg-color);
    border-image-width: 4px;
    outline: none;
  }

  textarea::placeholder {
    font-size: var(--step--1);
  }

  textarea:user-invalid {
    color: var(--brand-red-light);
    box-shadow: 0 0 2px 2px var(--brand-red-light) inset;
  }

  :root {
    interpolate-size: allow-keywords;
  }

  p + p {
    margin-top: 1lh;
  }

  p + :is(h2, h3, h4, h5, h6) {
    margin-top: var(--space-s);
  }

  :is(h1, h2, h3, h4, h5, h6) + * {
    margin-top: var(--space-2xs);
  }

  p + :is(ul, ol), :is(ul, ol) + p {
    margin-top: var(--space-xs);
  }

  dl {
    grid-gap: var(--space-2xs);
    grid-template-columns: auto 1fr;
    justify-content: space-between;
    display: grid;
  }

  dt {
    font-family: var(--font-sc);
    font-size: var(--step-0);
    color: var(--text-primary);
  }

  dd {
    font-size: var(--step--1);
    color: var(--text-secondary);
    margin: 0;
    padding-top: 3px;
  }
}

@layer components {
  .ms-btn, .ms-btn-cta {
    white-space: nowrap;
    font-family: var(--font-sc);
    padding: var(--space-2xs) var(--space-xs);
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2xs);
    touch-action: manipulation;
    border-image: url("/assets/svg/frame-2.svg") 10 / 25px / 5px;
    min-width: 130px;
    height: 50px;
    transition: background-color .3s, color .3s, opacity .3s;
    display: flex;
  }

  .ms-btn {
    background-color: var(--brand-purple);
    color: var(--text-white);
    justify-content: center;
  }

  .ms-btn:hover {
    background-color: var(--brand-purple-light);
    cursor: pointer;
  }

  .ms-btn:disabled {
    background-color: var(--button-disabled-color);
    opacity: .8;
    cursor: not-allowed;
  }

  .ms-btn-cta {
    background-color: var(--brand-red);
    color: var(--text-white);
  }

  .ms-btn-cta:hover:not(:disabled), .ms-btn-cta:focus-visible {
    background-color: var(--brand-red-light);
    cursor: pointer;
  }

  :is(.ms-btn-cta:hover:not(:disabled), .ms-btn-cta:focus-visible):after {
    transform: translateX(3px);
  }

  .ms-btn-cta:after {
    content: "";
    width: var(--step-0);
    height: var(--step-0);
    background-image: url("/assets/svg/manicule.svg");
    background-position: center;
    background-repeat: no-repeat;
    transition: transform .3s;
    display: inline-block;
  }

  .ms-btn-cta:disabled {
    background-color: var(--button-disabled-color);
    opacity: .8;
    cursor: not-allowed;
  }

  .ms-text-btn {
    text-transform: lowercase;
    font-family: var(--font-sc);
    white-space: nowrap;
    color: var(--text-primary);
    user-select: none;
    background-color: #0000;
    padding-block: 0;
    padding-inline: 0;
  }

  .ms-text-btn:hover {
    cursor: pointer;
    color: var(--brand-red);
  }

  .ms-text-btn:focus-visible {
    color: var(--brand-red);
    outline-color: var(--brand-red);
  }

  .ms-btn-tertiary {
    text-transform: lowercase;
    font-family: var(--font-sc);
    white-space: nowrap;
    color: var(--text-primary);
    user-select: none;
    padding: var(--space-3xs);
    font-size: var(--step--1);
    background-color: #fff;
  }

  .ms-btn-tertiary:hover {
    cursor: pointer;
    text-decoration: none;
    transform: scale(1.01);
  }

  .ms-btn-tertiary {
    transition: background-color .2s, color .2s, box-shadow .2s, transform .2s;
  }

  .ms-btn-tertiary:focus-visible {
    color: var(--brand-red);
    outline-color: var(--brand-red);
  }

  .ms-btn-tertiary {
    border-image: url("/assets/svg/frame-2.svg") 10 / 25px / 4px;
  }

  .ms-btn-row {
    column-gap: var(--space-xs);
    align-items: center;
    display: flex;
  }

  .ms-btn-google {
    justify-content: center;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
    color: var(--text-primary);
    font-size: var(--step--1);
    font-family: var(--font-p);
    background-color: #fff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    min-width: 240px;
    height: 40px;
    transition: background-color .3s, box-shadow .3s;
    display: flex;
  }

  .ms-btn-google:hover {
    cursor: pointer;
    background-color: #f8f9fa;
    text-decoration: none;
    box-shadow: 0 1px 3px #0000001a;
  }

  .ms-btn-google:active {
    background-color: #f1f3f4;
  }

  .ms-btn-google img {
    margin-right: var(--space-3xs);
  }

  .oauth-separator {
    margin: var(--space-s) 0 0 0;
    text-align: center;
    align-items: center;
    display: flex;
  }

  .oauth-separator:before, .oauth-separator:after {
    content: "";
    background: #dadce0;
    flex: 1;
    height: 1px;
  }

  .oauth-separator span {
    padding: 0 var(--space-xs);
    color: var(--text-secondary);
    background: var(--card-bg-color);
    font-size: 14px;
  }

  header.ms-navigation {
    background-color: var(--card-bg-color);
    width: 100%;
    padding-bottom: var(--space-xs);
    padding-inline: var(--space-2xs);
    padding-top: var(--space-xs);
    border-image: url("/assets/svg/frame-2.svg") 27 / 12px / 3px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  header.ms-navigation:has(.ms-banner) {
    padding-top: 0;
  }

  @media (max-width: 600px) {
    header.ms-navigation {
      padding-top: var(--space-3xs);
      padding-bottom: var(--space-2xs);
    }
  }

  header.ms-navigation .navigation-inner {
    width: 100%;
    max-width: var(--content-max-width);
    text-wrap: nowrap;
    flex-direction: column;
    justify-self: center;
    display: flex;
  }

  header.ms-navigation .navigation-inner > .top-nav {
    justify-content: space-between;
    align-items: center;
    column-gap: var(--space-m);
    flex-direction: row;
    display: flex;
  }

  header.ms-navigation .navigation-inner .logo {
    width: 200px;
  }

  @media (max-width: 768px) {
    header.ms-navigation .navigation-inner .logo {
      width: 150px;
    }
  }

  @media (max-width: 400px) {
    header.ms-navigation .navigation-inner .logo {
      width: 110px;
    }
  }

  header.ms-navigation .navigation-inner .actions {
    justify-content: flex-end;
    align-items: center;
    column-gap: var(--space-m);
    font-size: var(--step-0);
    flex-flow: row;
    flex-grow: 1;
    display: flex;
  }

  @media (max-width: 600px) {
    header.ms-navigation .navigation-inner .actions {
      column-gap: var(--space-xs);
    }
  }

  header.ms-navigation .navigation-inner .actions img {
    height: var(--step-1);
  }

  header.ms-navigation .navigation-inner .actions > .ms-search-container {
    height: 45px;
  }

  header.ms-navigation .navigation-inner .actions > .cart {
    --icon-url: url("/assets/svg/cart.svg");
  }

  header.ms-navigation .navigation-inner .actions > .cart > #cart-count {
    margin-left: var(--space-3xs);
  }

  header.ms-navigation .navigation-inner .actions .account {
    --icon-url: url("/assets/svg/account.svg");
    justify-content: center;
    margin-left: -5px;
    display: flex;
  }

  @media (max-width: 768px) {
    header.ms-navigation .navigation-inner .actions .account {
      padding-top: 7px;
    }
  }

  header.ms-navigation .navigation-inner .actions .country:hover {
    text-decoration: none;
  }

  header.ms-navigation .navigation-inner .actions .icon-nav {
    align-items: center;
    display: inline-flex;
  }

  header.ms-navigation .navigation-inner .actions .icon-nav:before {
    content: "";
    width: var(--step-1);
    height: var(--step--1);
    background-color: var(--text-primary);
    mask: var(--icon-url) no-repeat center / contain;
  }

  header.ms-navigation .navigation-inner .actions .icon-nav:hover:before {
    background-color: var(--brand-red);
  }

  header.ms-navigation .navigation-inner .actions .account-menu {
    flex-direction: row;
    display: flex;
  }

  header.ms-navigation .navigation-inner > .game-nav {
    align-items: center;
    column-gap: clamp(var(--space-xs), var(--space-m), var(--space-m));
    padding-top: var(--space-xs);
    flex-direction: row;
    justify-content: center;
    display: flex;
  }

  header.ms-navigation .navigation-inner > .game-nav a {
    font-size: var(--step--1);
  }

  header.ms-navigation .navigation-inner > .game-nav a :not(:hover) {
    color: var(--text-secondary);
  }

  header.ms-navigation .navigation-inner > .game-nav .ms-text-btn {
    font-size: var(--step--1);
    text-transform: revert;
    padding-bottom: 3px;
  }

  @media (max-width: 900px) {
    .icon-nav {
      font-size: 0;
    }

    .icon-nav #cart-count {
      font-size: var(--step-0);
      margin-left: 0;
    }

    .wishlist {
      display: none;
    }
  }

  @media (max-width: 768px) {
    .top-nav {
      justify-content: space-between;
    }
  }

  footer {
    width: 100%;
    max-width: var(--content-max-width);
    background-color: var(--card-bg-color);
    padding: var(--space-l);
    margin-bottom: var(--space-s);
    border-image: url("/assets/svg/frame-2.svg") 27 / 12px / 3px;
    justify-self: center;
  }

  footer nav {
    justify-content: space-between;
    align-items: center;
    row-gap: var(--space-m);
    width: 100%;
    padding-bottom: var(--space-l);
    background-image: url("/assets/svg/line.svg");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 3px;
    flex-wrap: nowrap;
    display: flex;
  }

  footer nav div {
    gap: var(--space-2xs);
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 768px) {
    footer nav {
      flex-direction: column;
      align-items: flex-start;
    }
  }

  footer .footer-btm {
    padding-top: var(--space-s);
    font-family: var(--font-sc);
    font-size: var(--step--1);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  footer .footer-btm img {
    height: var(--step-1);
  }

  @media (max-width: 768px) {
    footer .footer-btm {
      row-gap: var(--space-xs);
      flex-direction: column;
      align-items: flex-start;
    }
  }

  .ms-breadcrumbs ol {
    font-size: var(--step--1);
    flex-wrap: wrap;
    display: flex;
  }

  @media (max-width: 600px) {
    .ms-breadcrumbs ol {
      font-size: var(--step--2);
    }
  }

  .ms-breadcrumbs ol > li {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ms-breadcrumbs ol > li > * {
    color: var(--text-secondary);
    font-family: var(--font-sc);
  }

  .ms-breadcrumbs ol > li:after {
    color: var(--text-secondary);
    font-size: var(--step--2);
    content: ">";
    padding: 0 var(--space-3xs);
    background: none;
    display: inline;
  }

  .ms-breadcrumbs ol > li:last-child:after {
    content: none;
  }

  .ms-breadcrumbs.ellipses:has(li:nth-child(3)) li:not(:first-child):not(:last-child) {
    display: none;
  }

  .ms-breadcrumbs.ellipses:has(li:nth-child(3)) li:first-child:after {
    content: "> … >";
    padding-left: .5em;
  }

  .ms-breadcrumbs.ellipses:has(li:nth-child(3)) li + li:before {
    content: "";
    padding-right: 0;
  }

  div.ms-attributes {
    gap: var(--space-2xs);
    font-size: var(--step--1);
    flex-wrap: wrap;
    display: flex;
  }

  div.ms-attributes small {
    white-space: nowrap;
    padding: var(--space-3xs);
    font-size: var(--step--2);
    border-image: url("/assets/svg/frame-2.svg") 10 / 25px / 3px;
  }

  ul.ms-attributes {
    padding-left: 0;
  }

  ul.ms-attributes li {
    padding-left: 0;
    display: table;
  }

  ul.ms-attributes li span {
    display: table-cell;
  }

  ul.ms-attributes li span:first-child {
    font-style: italic;
    font-family: var(--font-sc);
    font-size: var(--step--1);
    position: relative;
    overflow: hidden;
  }

  ul.ms-attributes li span:first-child:after {
    content: "";
    margin-left: var(--space-3xs);
    bottom: calc((var(--step--1) / 2)  - 3px);
    background: url("/assets/svg/line.svg") bottom repeat-x;
    width: 100%;
    height: 2px;
    position: absolute;
  }

  ul.ms-attributes li span + span {
    font-size: var(--step--1);
    text-align: right;
    vertical-align: bottom;
    width: 1%;
    padding-left: var(--space-3xs);
    white-space: nowrap;
  }

  ul.ms-attributes li span + span:first-letter {
    text-transform: uppercase;
  }

  .ms-card {
    background-color: var(--card-bg-color);
    border-image: var(--card-border);
    width: 100%;
    padding: var(--space-m);
    padding-top: var(--space-s);
    max-width: var(--content-max-width);
    flex: 0;
    box-shadow: 0 50px 100px -20px #32325d40, 0 30px 60px -30px #0000004d, inset 0 -2px 6px #1e0a4059;
  }

  @media (max-width: 768px) {
    .ms-card {
      padding: var(--space-s);
    }
  }

  @media (max-width: 320px) {
    .ms-card {
      padding: var(--space-xs);
    }
  }

  .ms-avatar {
    width: 50px;
  }

  .ms-line-fieldset {
    border: none;
    border-image: ;
    width: 100%;
    min-width: 0;
    padding-top: 0;
    padding-left: 0;
  }

  .ms-line-fieldset > legend {
    padding-top: var(--space-3xs);
    white-space: nowrap;
    align-items: center;
    width: 100%;
    display: flex;
  }

  .ms-line-fieldset > legend:after {
    content: "";
    width: 100%;
    height: 3px;
    margin-top: 3px;
    margin-left: var(--space-xs);
    background: url("/assets/svg/line.svg") center / contain repeat-x;
    flex-grow: 1;
  }

  .ms-line-fieldset legend + * {
    margin-top: var(--space-xs);
  }

  form .form-row {
    align-items: flex-start;
    gap: var(--space-xs);
    flex-flow: wrap;
    width: 100%;
    display: flex;
  }

  form .form-row > * {
    flex: 1;
  }

  form .form-row > label:has(input[type="checkbox"]) {
    padding-top: var(--space-s);
    align-self: center;
  }

  form label + .form-row {
    margin-top: var(--space-3xs);
  }

  ms-field-error {
    color: var(--ms-error);
    font-size: var(--step--2);
    overflow-wrap: break-word;
    opacity: 0;
    width: 100%;
    max-height: 0;
    transition: max-height .3s ease-out, opacity .3s ease-out, padding .3s ease-out;
    display: block;
    overflow: hidden;
  }

  ms-field-error:not(:empty) {
    opacity: 1;
    max-height: min-content;
  }

  ms-form-errors {
    background-color: var(--ms-error-dimmed);
    border: 1px solid var(--ms-error);
    opacity: 0;
    border-radius: 2px;
    max-height: 0;
    transition: max-height .3s ease-out, opacity .3s ease-out, padding .3s ease-out, margin .3s ease-out;
    display: block;
    overflow: hidden;
  }

  ms-form-errors:has(:not(:empty)) {
    opacity: 1;
    max-height: min-content;
    padding: var(--space-3xs);
    margin-top: var(--space-xs);
  }

  ms-form-errors ul {
    margin: 0;
    padding: 0;
    list-style-position: inside;
  }

  ms-form-errors li {
    color: var(--ms-error);
    filter: var(--ms-error-filter);
    font-size: var(--step--2);
    padding-left: 0;
    list-style-image: url("/assets/svg/cross.svg");
  }

  ms-form-errors li:not(:last-child) {
    margin-bottom: var(--space-3xs);
  }

  ms-form-errors li:before {
    content: " ";
  }

  .ms-loading-bar {
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--brand-red), transparent, var(--brand-red), transparent);
    width: 100%;
    height: 3px;
    position: fixed;
    top: 0;
    left: 0;
  }

  .htmx-request.ms-loading-bar {
    opacity: 1;
    animation: .3s linear forwards fadeIn, 1s ease-in-out infinite slide;
  }

  @keyframes slide {
    0% {
      transform: translateX(-100%);
    }

    100% {
      transform: translateX(100%);
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }

    50% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }

  .item-form .item-form--header {
    column-gap: var(--space-s);
    height: 30px;
    margin-bottom: var(--space-m);
    align-items: baseline;
    display: flex;
  }

  .item-form .item-form--header span {
    user-select: none;
  }

  .item-form .item-form--header > .item-name {
    font-family: var(--font-sc);
    font-size: var(--step-1);
    flex-grow: 1;
    flex-shrink: 0;
    display: flex;
  }

  .item-form .item-form--body {
    margin-top: var(--space-s);
    gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .add-image {
    flex-direction: column;
    grid-area: add-image;
    width: 100%;
    display: flex;
  }

  .item-form .item-form--body .product-info {
    row-gap: var(--space-xs);
    flex-direction: column;
    grid-area: product;
    display: flex;
  }

  .item-form .item-form--body .product-info h4 {
    margin-bottom: var(--space-xs);
    font-family: var(--font-sc);
  }

  .item-form .item-form--body .product-info p {
    margin: 0;
  }

  .item-form .item-form--body .product {
    flex-direction: column;
    grid-area: product;
    display: flex;
  }

  .item-form .item-form--body .product .product-header {
    width: 100%;
    margin-bottom: var(--space-xs);
    align-items: center;
    display: flex;
  }

  .item-form .item-form--body .product .product-header h4 {
    white-space: nowrap;
    font-family: var(--font-sc);
    margin: 0;
  }

  .item-form .item-form--body .product .product-header:after {
    content: "";
    width: 100%;
    height: 3px;
    margin-top: 3px;
    margin-left: var(--space-xs);
    background: url("/assets/svg/line.svg") center / contain repeat-x;
    flex-grow: 1;
  }

  .item-form .item-form--body .product .product-selector--search {
    gap: var(--space-3xs);
    flex-direction: column;
  }

  .item-form .item-form--body .product .product-selector--search .product-actions {
    margin-top: var(--space-xs);
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3xs);
    flex-wrap: wrap;
    display: flex;
  }

  .item-form .item-form--body .product .product-selector--search .product-actions .manual {
    gap: var(--space-2xs);
    align-items: baseline;
    display: flex;
  }

  .item-form .item-form--body .product .product-selector--search .product-actions .product-manual-entry {
    color: var(--text-secondary);
    font-size: var(--step--1);
  }

  .item-form .item-form--body .product .product-add-another-btn {
    cursor: pointer;
    font-family: var(--font-sc);
    font-size: var(--step-0);
    color: var(--text-secondary);
    background: none;
    border: none;
    padding: 0;
    transition: color .2s;
  }

  .item-form .item-form--body .product .product-add-another-btn:hover {
    color: var(--brand-red);
  }

  .item-form .item-form--body .product .product-selector--selected {
    align-items: flex-start;
    gap: var(--space-s);
    border-radius: 4px;
    flex-direction: row;
    display: flex;
  }

  .item-form .item-form--body .product .product-selector--image {
    aspect-ratio: 1;
    object-fit: cover;
    border-image: var(--frame-border-image);
    border-image-width: 3px;
    border-image-outset: 2px;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .product .product-selector--image {
      width: 80px;
      height: 80px;
    }
  }

  .item-form .item-form--body .product .product-selector--info {
    gap: var(--space-3xs);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }

  .item-form .item-form--body .product .product-selector--info .ms-breadcrumbs {
    justify-content: space-between;
    gap: var(--space-xs);
    align-items: start;
    display: flex;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .product .product-selector--info .ms-breadcrumbs {
      font-size: var(--step--2) !important;
    }
  }

  .item-form .item-form--body .product .product-selector--info .ms-breadcrumbs ol {
    flex: 1;
    min-width: 0;
  }

  .item-form .item-form--body .product .product-selector--info h3 > a {
    font-family: var(--font-p);
  }

  .item-form .item-form--body .product .product-selector--edit-btn {
    cursor: pointer;
    opacity: .7;
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: opacity .2s;
    display: flex;
  }

  .item-form .item-form--body .product .product-selector--edit-btn:hover {
    opacity: 1;
  }

  .item-form .item-form--body .product .product-selector--edit-btn img {
    filter: brightness(0) saturate() invert(0%);
    width: 16px;
    height: 16px;
    display: block;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .product .product-selector--edit-btn img {
      width: 14px;
      height: 14px;
    }
  }

  .item-form .item-form--body .product .product-entry-form {
    gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .product .product-entry-form > label {
    gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .product .product-entry-form .ms-category-autocomplete {
    margin-top: var(--space-3xs);
  }

  .item-form .item-form--body .product .product-entry-form .category-selector--selected {
    margin-top: var(--space-3xs);
  }

  .item-form .item-form--body .product .product-entry-form .category-selector--selected .ms-breadcrumbs {
    justify-content: space-between;
    gap: var(--space-xs);
    align-items: start;
    display: flex;
  }

  .item-form .item-form--body .product .product-entry-form .category-selector--selected .ms-breadcrumbs ol {
    flex: 1;
    min-width: 0;
  }

  .item-form .item-form--body .product .product-entry-form .category-selector--selected .ms-breadcrumbs ol > li > * {
    color: var(--text-primary);
    font-size: var(--step--1);
  }

  .item-form .item-form--body .product .product-entry-row {
    gap: var(--space-s);
    flex-wrap: wrap;
    display: flex;
  }

  .item-form .item-form--body .product .product-entry-row > label {
    gap: var(--space-3xs);
    flex-direction: column;
    flex: 1;
    min-width: 120px;
    display: flex;
  }

  .item-form .item-form--body .product .product-entry-row > label .input-with-prefix {
    display: block;
    position: relative;
  }

  .item-form .item-form--body .product .product-entry-row > label .input-with-prefix:before {
    content: attr(data-prefix);
    font-family: var(--font-sc);
    left: var(--space-2xs);
    pointer-events: none;
    font-size: var(--step-0);
    color: var(--text-secondary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .item-form .item-form--body .product .product-entry-row > label .input-with-prefix input {
    text-align: end;
    width: 100%;
    padding-left: 32px;
    padding-right: var(--space-2xs);
    font-size: var(--step-0);
  }

  .item-form .item-form--body .product .product-entry-actions {
    gap: var(--space-s);
    margin-top: var(--space-xs);
    justify-content: flex-end;
    display: flex;
  }

  .item-form .item-form--body .product .ms-category-autocomplete .aa-DetachedSearchButton {
    background-color: var(--input-bg-color) !important;
    text-align: left !important;
    cursor: pointer !important;
    align-items: center !important;
    width: 100% !important;
    display: flex !important;
  }

  .item-form .item-form--body .product .ms-category-autocomplete .aa-DetachedSearchButton .aa-DetachedSearchButtonQuery {
    color: var(--text-primary) !important;
    font-size: var(--step--1) !important;
    font-family: var(--font-p) !important;
    display: inline !important;
  }

  .item-form .item-form--body .product .ms-category-autocomplete .aa-DetachedSearchButtonPlaceholder {
    color: var(--text-placeholder) !important;
    font-size: var(--step--1) !important;
    font-family: var(--font-p) !important;
    display: inline !important;
  }

  .item-form .item-form--body .product .ms-category-autocomplete .aa-Autocomplete:has(.aa-DetachedSearchButton) {
    border-image: var(--frame-border-image) !important;
    border-image-outset: 5px !important;
    flex-grow: 1 !important;
    width: 100% !important;
  }

  .item-form .item-form--body .condition {
    grid-area: condition;
    justify-content: flex-start;
    height: min-content;
  }

  .item-form .item-form--body .condition > legend label {
    font-size: var(--step-0) !important;
  }

  .item-form .item-form--body .notes {
    padding-top: var(--space-xs);
  }

  .item-form .item-form--body .item-fieldset {
    gap: var(--space-s);
    margin-bottom: var(--space-xs);
    flex-direction: column;
    display: flex;
    position: relative;
  }

  .item-form .item-form--body .item-fieldset .form-row {
    width: auto;
  }

  .item-form .item-form--body .item-fieldset .product-preview {
    align-items: flex-start;
    gap: var(--space-s);
    flex-direction: row;
    display: flex;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .item-fieldset .product-preview {
      gap: var(--space-xs);
    }
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--image {
    aspect-ratio: 1;
    object-fit: cover;
    border-image: var(--frame-border-image);
    border-image-width: 3px;
    border-image-outset: 2px;
    flex-shrink: 0;
    width: 120px;
    height: 120px;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .item-fieldset .product-preview .product-preview--image {
      width: 80px;
      height: 80px;
    }
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--info {
    gap: var(--space-3xs);
    flex-direction: column;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--info .ms-breadcrumbs {
    justify-content: space-between;
    gap: var(--space-xs);
    align-items: start;
    display: flex;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .item-fieldset .product-preview .product-preview--info .ms-breadcrumbs {
      font-size: var(--step--2) !important;
    }
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--info .ms-breadcrumbs ol {
    flex: 1;
    min-width: 0;
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--info h3 > a {
    font-family: var(--font-p);
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--action-btn {
    cursor: pointer;
    opacity: .7;
    background: none;
    border: none;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    transition: opacity .2s;
    display: flex;
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--action-btn:hover {
    opacity: 1;
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--action-btn img {
    filter: brightness(0) saturate() invert(0%);
    width: 16px;
    height: 16px;
    display: block;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .item-fieldset .product-preview .product-preview--action-btn img {
      width: 14px;
      height: 14px;
    }
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--remove-btn {
    font-size: var(--step-2);
    opacity: .6;
    font-family: var(--font-sc);
    color: var(--text-secondary);
    height: 20px;
  }

  .item-form .item-form--body .item-fieldset .product-preview .product-preview--remove-btn:hover {
    opacity: 1;
    color: var(--text-primary);
  }

  .item-form .item-form--body .shared-fields-container {
    gap: var(--space-s);
    margin-bottom: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .box-status {
    text-wrap: nowrap;
    gap: var(--space-xs);
    border: none;
    flex-flow: wrap;
    padding: 0;
  }

  .item-form .item-form--body .unitless-conditions {
    gap: var(--space-xs);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .unitless-conditions .form-row {
    gap: var(--space-s);
    flex-wrap: wrap;
    align-items: flex-end;
    display: flex;
  }

  .item-form .item-form--body .unitless-conditions .form-row > label {
    gap: var(--space-3xs);
    font-size: var(--step--1);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .unitless-conditions .form-row > label select {
    font-size: var(--step--1);
    padding: var(--space-3xs) var(--space-2xs);
  }

  .item-form .item-form--body .unitless-conditions .form-row > label:has(input[type="checkbox"]) {
    align-items: center;
    gap: var(--space-2xs);
    flex-direction: row;
  }

  .item-form .item-form--body .unitless-conditions .form-row > label:has(input[type="checkbox"]) input[type="checkbox"] {
    cursor: pointer;
  }

  .item-form .item-form--body .units h4 {
    margin-bottom: var(--space-2xs);
  }

  .item-form .item-form--body .units .table-container {
    max-width: 90vw;
    overflow-x: auto;
  }

  .item-form .item-form--body .units .figure-table td:nth-child(2) {
    z-index: 1;
    background-color: var(--card-bg-color);
    position: sticky;
    left: 0;
  }

  .item-form .item-form--body .units .figure-table .checkbox-cell {
    white-space: nowrap;
    text-align: center;
    width: 1%;
  }

  .item-form .item-form--body .units .figure-table .checkbox-cell input[type="checkbox"] {
    cursor: pointer;
  }

  .item-form .item-form--body .units .figure-table select {
    font-size: var(--step--1);
    background-color: #0000;
    border: none;
  }

  .item-form .item-form--body .units .figure-table .quantity-cell {
    white-space: nowrap;
    width: 1%;
  }

  .item-form .item-form--body .units .figure-table .quantity-cell input[type="number"] {
    width: 40px;
    padding: var(--space-3xs);
    font-size: var(--step--1);
  }

  .item-form .item-form--body .units .figure-table .master-control-header {
    cursor: pointer;
    user-select: none;
    position: relative;
  }

  .item-form .item-form--body .units .figure-table .master-control-label {
    pointer-events: none;
    padding-left: var(--space-2xs);
    display: inline-block;
  }

  .item-form .item-form--body .units .figure-table .master-control {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .item-form .item-form--body .units .figure-table .master-control-icon {
    pointer-events: none;
    user-select: none;
    background-image: var(--chevron-down);
    vertical-align: middle;
    background-position: center;
    background-repeat: no-repeat;
    background-size: .625rem;
    width: 1rem;
    height: 1rem;
    margin-left: .25rem;
    display: inline-block;
  }

  .item-form .item-form--body .units .figure-table .master-control select {
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .item-form .item-form--body .list-for-sale {
    padding-top: var(--space-2xs);
    border-image-width: 5px;
    flex-direction: column;
    grid-area: list-for-sale;
  }

  .item-form .item-form--body .list-for-sale > legend label {
    font-size: var(--step-0) !important;
  }

  .item-form .item-form--body .list-for-sale .disclaimer {
    margin-top: 0;
    margin-bottom: var(--space-xs);
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  .item-form .item-form--body .list-for-sale .form-row .price, .item-form .item-form--body .list-for-sale .form-row .quantity {
    flex: none;
  }

  .item-form .item-form--body .list-for-sale .form-row .price {
    min-width: 14ch;
  }

  .item-form .item-form--body .list-for-sale .form-row .price .input-with-prefix {
    display: inline-block;
    position: relative;
  }

  .item-form .item-form--body .list-for-sale .form-row .price .input-with-prefix:before {
    content: attr(data-prefix);
    font-family: var(--font-sc);
    left: var(--space-2xs);
    pointer-events: none;
    font-size: var(--step-0);
    color: var(--text-secondary);
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  .item-form .item-form--body .list-for-sale .form-row .price .input-with-prefix input {
    text-align: end;
    width: 10ch;
    padding-left: 32px;
    padding-right: var(--space-2xs);
  }

  .item-form .item-form--body .list-for-sale .form-row .quantity {
    min-width: 10ch;
  }

  .item-form .item-form--body .list-for-sale .form-row .quantity input {
    width: 8ch;
  }

  .item-form .item-form--body .list-for-sale .shipping {
    margin-top: var(--space-s);
  }

  :is(.item-form .item-form--body .list-for-sale .shipping .weight-section, .item-form .item-form--body .list-for-sale .shipping .dimensions-section):has(input:disabled) {
    opacity: .5;
  }

  .item-form .item-form--body .list-for-sale .parcel-template {
    gap: var(--space-xs);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .list-for-sale .parcel-template select {
    min-width: 38ch;
  }

  .item-form .item-form--body .list-for-sale .shipping-inputs {
    gap: var(--space-s);
    margin-top: var(--space-m);
    flex-direction: column;
    display: flex;
  }

  .item-form .item-form--body .list-for-sale .dimensions-weight-row {
    gap: var(--space-xl);
    flex-wrap: wrap;
    display: flex;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .list-for-sale .dimensions-weight-row {
      gap: var(--space-m);
    }
  }

  .item-form .item-form--body .list-for-sale .weight-section, .item-form .item-form--body .list-for-sale .dimensions-section {
    gap: var(--space-2xs);
    flex-direction: column;
    display: flex;
  }

  :is(.item-form .item-form--body .list-for-sale .weight-section, .item-form .item-form--body .list-for-sale .dimensions-section) > label {
    font-size: var(--step--1);
  }

  .item-form .item-form--body .list-for-sale .template-actions {
    justify-content: space-between;
    display: flex;
  }

  .item-form .item-form--body .list-for-sale .template-actions .save-template-btn {
    margin-left: auto;
  }

  .item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs {
    align-items: center;
    gap: var(--space-xs);
    display: flex;
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-prefix {
    display: inline-block;
    position: relative;
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-prefix:before {
    content: attr(data-prefix);
    font-family: var(--font-sc);
    left: var(--space-2xs);
    pointer-events: none;
    font-size: var(--step-0);
    color: var(--text-secondary);
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-prefix input {
    text-align: end;
    width: 6ch;
    padding-left: 32px;
    padding-right: var(--space-2xs);
  }

  @media (max-width: 768px) {
    :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-prefix input {
      width: 6ch;
      padding-left: 28px;
    }
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-suffix {
    display: inline-block;
    position: relative;
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-suffix:after {
    content: attr(data-suffix);
    font-family: var(--font-sc);
    right: var(--space-2xs);
    pointer-events: none;
    font-size: var(--step-0);
    color: var(--text-secondary);
    z-index: 1;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-suffix input {
    text-align: start;
    width: 7ch;
    padding-right: 32px;
    padding-left: var(--space-2xs);
  }

  @media (max-width: 768px) {
    :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .input-with-suffix input {
      width: 6ch;
      padding-right: 28px;
    }
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) input {
    width: 6ch;
  }

  :is(.item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs) .divider {
    user-select: none;
  }

  @media (max-width: 768px) {
    .item-form .item-form--body .list-for-sale .weight-inputs, .item-form .item-form--body .list-for-sale .dimensions-inputs {
      gap: var(--space-2xs);
    }
  }

  .item-form .item-form--body .list-for-sale .shipping-estimate {
    font-size: var(--step--1);
    margin-top: var(--space-3xs);
    color: var(--text-secondary);
  }

  .item-form .item-form--body .list-for-sale .free-shipping-row {
    display: flex;
  }

  .ms-filters-sidebar {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    align-self: start;
  }

  .ms-filters-sidebar > .filters-sidebar--header {
    justify-content: space-between;
    align-items: baseline;
    display: flex;
  }

  .ms-filters-sidebar > .filters-sidebar--header > h3 {
    font-size: var(--step-1);
    color: var(--text-secondary);
    font-family: var(--font-p);
  }

  @media (min-width: 768px) {
    .ms-filters-sidebar > .filters-sidebar--header > h3 {
      display: none;
    }
  }

  .ms-filters-sidebar > .filters-sidebar--header > label {
    cursor: pointer;
    width: auto;
    font-family: var(--font-sc);
    font-size: var(--step-0);
  }

  @media (min-width: 768px) {
    .ms-filters-sidebar > .filters-sidebar--header > label {
      display: none;
    }
  }

  .ms-filters-sidebar > .filters-sidebar--form {
    row-gap: var(--space-s);
    margin-top: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  .ms-filters-sidebar > .filters-sidebar--form fieldset:not(.ms-line-fieldset) {
    row-gap: var(--space-xs);
    flex-direction: column;
    display: flex;
  }

  .ms-filters-sidebar > .filters-sidebar--form fieldset:not(.ms-line-fieldset) > legend {
    user-select: none;
    background-color: initial;
    width: fit-content;
  }

  .ms-filters-sidebar > .filters-sidebar--form fieldset:not(.ms-line-fieldset) label {
    user-select: none;
    font-size: var(--step--1);
  }

  .ms-filters-sidebar > .filters-sidebar--form fieldset:not(.ms-line-fieldset) label select {
    font-style: normal;
  }

  .ms-filters-sidebar > .filters-sidebar--form label:has(select) {
    row-gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  .ms-filters-sidebar > .filters-sidebar--form button[type="submit"] {
    width: 95%;
    margin-bottom: var(--space-xs);
    align-self: center;
  }

  .ms-filters-sidebar > .filters-sidebar--form .reset-filters-btn {
    text-align: center;
  }

  .ms-filters-sidebar .show-all-label {
    color: var(--text-primary);
    font-family: var(--font-sc);
    font-size: var(--step-0);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    transition: background-color .2s;
    display: none;
  }

  .ms-filters-sidebar .show-all-label:before {
    content: "show all";
  }

  .ms-filters-sidebar .show-all-label:hover {
    color: var(--brand-red);
  }

  .ms-filters-sidebar .categories {
    margin-top: var(--space-2xs);
    position: relative;
  }

  .ms-filters-sidebar .categories ol > li {
    list-style: none;
  }

  .ms-filters-sidebar .categories > ol > li {
    padding-left: 0;
  }

  .ms-filters-sidebar .categories ol > li > a, .ms-filters-sidebar .categories ol > li > details > summary > a {
    font-family: var(--font-p);
    font-size: var(--step--1);
  }

  .ms-filters-sidebar .categories ol > li:nth-child(n+6) {
    transition: height .3s, opacity .3s;
    display: none;
  }

  @starting-style {
    .ms-filters-sidebar .categories ol > li:nth-child(n+6) {
      opacity: 0;
      height: 0;
    }
  }

  .ms-filters-sidebar .categories:has(ol > li:nth-child(6)) ol > li:nth-child(5) {
    position: relative;
  }

  .ms-filters-sidebar .categories:has(ol > li:nth-child(6)) ol > li:nth-child(5):after {
    content: "";
    background: linear-gradient(to bottom, transparent 0%, var(--background-body) 95%);
    pointer-events: none;
    transition: opacity .3s ease-out;
    position: absolute;
    inset: 0;
  }

  .ms-filters-sidebar .categories:has(ol > li:nth-child(6)) + .show-all-label {
    margin-top: var(--space-2xs);
    display: flex;
  }

  .ms-filters-sidebar #show-all {
    display: none;
  }

  .ms-filters-sidebar #show-all:not(:checked) + form fieldset:has(.categories) .categories:has(ol > li:nth-child(6)) ol > li:nth-child(5) {
    margin-bottom: 0;
  }

  .ms-filters-sidebar #show-all:checked + form fieldset:has(.categories) .categories ol > li:nth-child(n+6) {
    display: list-item;
  }

  .ms-filters-sidebar #show-all:checked + form fieldset:has(.categories) .categories ol > li:nth-child(5):after {
    opacity: 0;
  }

  .ms-filters-sidebar #show-all:checked + form fieldset:has(.categories) .show-all-label:before {
    content: "show fewer";
  }

  #toast-container {
    z-index: 50;
    bottom: var(--space-s);
    right: var(--space-s);
    gap: var(--space-2xs);
    flex-direction: column-reverse;
    display: flex;
    position: fixed;
  }

  #toast-container > .toast {
    background-color: var(--card-bg-color);
    width: fit-content;
    padding: var(--space-2xs);
    font-size: var(--step--2);
    border-image: url("/assets/svg/frame-2.svg") 10 / 25px / 3px;
    animation: .3s ease-out toast-in, .4s ease-in 4s forwards toast-out;
  }

  #toast-container > .toast.error {
    background-color: var(--ms-error);
  }

  #toast-container > .toast.error > span {
    white-space: nowrap;
    color: var(--text-white);
  }

  @keyframes toast-in {
    from {
      opacity: 0;
      transform: translateY(100%);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes toast-out {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(-50%);
    }
  }

  :root {
    --aa-description-highlight-background-color-rgb: 162, 51, 51 !important;
    --aa-selected-color-rgb: 162, 51, 51 !important;
    --aa-selected-color-alpha: .1 !important;
    --aa-input-border-color-alpha: 0 !important;
    --aa-panel-border-color-alpha: 0 !important;
    --aa-font-size: var(--step--1) !important;
  }

  .ms-search-container {
    flex-grow: 1;
    display: flex;
  }

  .ms-search-container:has(.aa-DetachedSearchButtonIcon) {
    flex-grow: 0;
  }

  .search-release-year {
    font-size: var(--step--1);
    color: var(--text-secondary);
    padding-left: var(--space-3xs);
  }

  .ms-product-autocomplete .aa-Autocomplete {
    max-width: 100%;
  }

  .ms-product-autocomplete .aa-DetachedSearchButton {
    background-color: var(--input-bg-color) !important;
    text-align: left !important;
    cursor: pointer !important;
    align-items: center !important;
    width: 100% !important;
    display: flex !important;
  }

  .ms-product-autocomplete .aa-DetachedSearchButton .aa-DetachedSearchButtonQuery {
    color: var(--text-primary) !important;
    font-size: var(--step--1) !important;
    font-family: var(--font-p) !important;
    display: inline !important;
  }

  .ms-product-autocomplete .aa-DetachedSearchButtonPlaceholder {
    color: var(--text-placeholder) !important;
    font-size: var(--step--1) !important;
    font-family: var(--font-p) !important;
    display: inline !important;
  }

  .ms-product-autocomplete .aa-Autocomplete:has(.aa-DetachedSearchButton) {
    border-image: var(--frame-border-image) !important;
    border-image-outset: 5px !important;
    flex-grow: 1 !important;
    width: 100% !important;
  }

  .ms-product-autocomplete .aa-ItemCategories .ms-breadcrumbs ol > li > * {
    font-size: var(--step--2) !important;
  }

  [data-tooltip]:after {
    content: attr(data-tooltip);
    background: var(--card-bg-color);
    padding: var(--space-2xs);
    font-size: var(--step--1);
    font-family: var(--font-p);
    opacity: 0;
    border: 1px solid #000;
    transition: opacity .1s ease-in .15s;
    display: block;
    position: absolute;
    box-shadow: 0 0 1px 1px #000;
  }

  [data-tooltip]:hover:after {
    opacity: 1;
  }

  nav.ms-pagination {
    gap: var(--space-xs);
    user-select: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    display: flex;
  }

  nav.ms-pagination .pagination-list {
    padding-left: 0;
  }

  nav.ms-pagination .pagination-list > li {
    list-style: none;
    display: inline-block;
  }

  nav.ms-pagination .pagination-list > li > span.current {
    color: var(--brand-red);
  }

  li.ms-listing-summary {
    min-width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
    container-type: inline-size;
  }

  li.ms-listing-summary.wide {
    grid-column: span 2;
  }

  li.ms-listing-summary > article {
    align-items: flex-start;
    gap: var(--space-2xs);
    flex-direction: row;
    display: flex;
  }

  li.ms-listing-summary > article .listing-summary-details {
    width: 100%;
  }

  li.ms-listing-summary > article .from {
    font-family: var(--font-p);
    color: var(--text-secondary);
    font-size: var(--step--2);
  }

  li.ms-listing-summary > article .nib-from {
    font-family: var(--font-p);
    color: var(--text-secondary);
    font-size: var(--step--1);
  }

  li.ms-listing-summary > article .nib-from .nib {
    color: var(--text-primary);
  }

  li.ms-listing-summary > article .image-wrapper {
    width: 100%;
    position: relative;
  }

  li.ms-listing-summary > article .image-wrapper .image-container {
    width: 100%;
    display: block;
    position: relative;
    overflow: visible;
  }

  li.ms-listing-summary > article .image-wrapper .image-container .listing-summary-image {
    object-fit: contain;
    transform-origin: center;
    border-image: url("/assets/svg/frame.svg") 27 / 10px;
    width: 100%;
    height: 250px;
    padding: 4px;
    transition: transform .3s;
  }

  li.ms-listing-summary > article .image-wrapper .image-container .listing-summary-image.cover {
    object-fit: cover;
  }

  li.ms-listing-summary > article .image-wrapper .image-container .listing-summary-image:hover {
    transform: scale(1.015);
  }

  li.ms-listing-summary > article .image-wrapper .image-container .product-overlay-image {
    aspect-ratio: 1;
    object-fit: contain;
    background: var(--card-bg-color);
    border-image: url("/assets/svg/frame.svg") 27 / 20px;
    width: 40%;
    height: auto;
    max-height: 250px;
    padding: 2px;
    position: absolute;
    bottom: 0;
    right: 0;
  }

  li.ms-listing-summary > article .image-wrapper .image-container .product-overlay-image:hover {
    width: auto;
    height: 250px;
  }

  li.ms-listing-summary > article .image-wrapper .image-container .product-overlay-image {
    transition: width .3s, height .3s;
  }

  li.ms-listing-summary > article .product .name {
    margin-top: var(--space-3xs);
    font-family: var(--font-p);
    font-size: var(--step-0);
  }

  li.ms-listing-summary > article .product .product-subtitle {
    font-family: var(--font-p);
    font-size: var(--step--2);
    color: var(--text-secondary);
    margin-top: var(--space-3xs);
  }

  li.ms-listing-summary > article .name {
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  li.ms-listing-summary > article .out-of-stock {
    color: var(--text-secondary);
    font-size: var(--step--1);
    font-family: var(--font-p);
  }

  li.ms-listing-summary > article .divider {
    color: var(--text-secondary);
    font-size: var(--step--2);
  }

  li.ms-listing-summary > article .listing-summary-seller {
    font-size: var(--step--2);
    font-family: var(--font-p);
    color: var(--text-secondary);
  }

  li.ms-listing-summary > article .listing-summary-price {
    font-size: var(--step-0-1);
    font-family: var(--font-sc);
  }

  li.ms-listing-summary > article .free-shipping {
    font-size: var(--step--2);
    color: var(--brand-red);
    display: block;
  }

  @container (width <= 1000px) {
    li.ms-listing-summary > article {
      flex-direction: column;
      place-content: center;
    }

    li.ms-listing-summary > article .listing-summary-details {
      width: 100%;
    }

    li.ms-listing-summary > article .listing-summary-details .description {
      max-width: 100%;
    }

    li.ms-listing-summary > article .save-listing {
      display: none;
    }
  }

  .ms-image-carousel {
    gap: var(--space-3xs);
    user-select: none;
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .ms-image-carousel .focused-image {
    object-fit: contain;
    aspect-ratio: 1;
    width: 100%;
    height: auto;
    max-height: 600px;
    transition: opacity .2s;
  }

  .ms-image-carousel .focused-image:not(.placeholder) {
    cursor: zoom-in;
  }

  .ms-image-carousel .focused-image.placeholder {
    object-fit: contain;
    padding: 5%;
  }

  .ms-image-carousel .focused-image.border {
    border-image: url("/assets/svg/frame.svg") 30 / 5px;
    padding: 3px;
  }

  .ms-image-carousel .thumbnails {
    gap: var(--space-2xs);
    padding-top: var(--space-2xs);
    flex-direction: row;
    align-items: center;
    padding-bottom: 5px;
    display: flex;
    overflow-x: auto;
  }

  .ms-image-carousel .thumbnails:empty, .ms-image-carousel .thumbnails:has( > img:only-child) {
    display: none;
  }

  .ms-image-carousel .thumbnails::-webkit-scrollbar {
    background: none;
    width: 0;
    height: 0;
  }

  .ms-image-carousel .thumbnails > img {
    aspect-ratio: 1;
    object-fit: contain;
    border-image: url("/assets/svg/frame.svg") 3 / 5px;
    width: 75px;
    height: 75px;
    padding: 5px;
    transition: transform .3s, box-shadow .3s;
  }

  .ms-image-carousel .thumbnails > img.cover {
    object-fit: cover;
  }

  @media (min-width: 768px) {
    .ms-image-carousel .thumbnails > img {
      width: 100px;
      height: 100px;
    }
  }

  .ms-image-carousel .thumbnails > img:hover {
    cursor: pointer;
    transform: scale(1.01);
    box-shadow: 0 2px 5px #2600004d;
  }

  .ms-image-carousel .thumbnails > img.focused {
    box-shadow: inset 0 0 1px 5px var(--brand-red);
  }

  .image-zoom-modal {
    border: none;
    width: 100vw;
    height: 100vh;
    padding: 0;
    overflow: hidden;
    background: none !important;
    border-image:  !important;
    max-width: none !important;
    max-height: none !important;
  }

  .image-zoom-modal::backdrop {
    background-color: #000000f2;
  }

  .image-zoom-modal .zoom-close-btn {
    top: var(--space-xs);
    right: var(--space-xs);
    z-index: 10;
    cursor: pointer;
    color: #fff;
    background: #00000080;
    border: 2px solid #ffffff4d;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    transition: background .2s, border-color .2s;
    display: flex;
    position: absolute;
  }

  .image-zoom-modal .zoom-close-btn:hover {
    background: #000000b3;
    border-color: #ffffff80;
  }

  .image-zoom-modal .zoom-close-btn svg {
    width: 24px;
    height: 24px;
  }

  .image-zoom-modal .zoom-image-container {
    touch-action: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    display: flex;
    overflow: hidden;
  }

  .image-zoom-modal .zoom-image {
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
    transform-origin: center;
    touch-action: none;
    cursor: zoom-in;
    background-color: #fff;
    border-image: url("/assets/svg/frame.svg") 30 / 5px;
    width: auto;
    max-width: 90vw;
    height: auto;
    max-height: 90vh;
    padding: 3px;
    transition: transform .1s ease-out;
  }

  .ms-listings {
    --sidebar-width: 270px;
    grid-template-columns: var(--sidebar-width) auto;
    column-gap: var(--space-s);
    width: 100%;
    margin-top: var(--space-s);
    flex: 1;
    align-items: flex-start;
    transition: grid-template-columns .2s ease-in-out;
    display: grid;
    overflow: clip;
  }

  @media (max-width: 768px) {
    .ms-listings {
      grid-column: full;
    }
  }

  .ms-listings .listings-header {
    padding-bottom: var(--space-s);
    justify-content: space-between;
    align-items: flex-end;
    row-gap: var(--space-2xs);
    flex-flow: wrap;
    display: flex;
  }

  .ms-listings .listings-header .listing-count {
    font-family: var(--font-p);
    font-size: var(--step-1);
  }

  .ms-listings .listings-header .category-kind {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  .ms-listings .listings-header .filter-sort-group {
    text-wrap: nowrap;
    align-self: flex-start;
    align-items: center;
    gap: var(--space-xs);
    flex-flow: wrap;
    margin-top: 0;
    display: flex;
  }

  @media (max-width: 768px) {
    .ms-listings .listings-header .filter-sort-group {
      flex-grow: 1;
      justify-content: space-between;
      width: 100%;
    }
  }

  @media (min-width: 768px) {
    .ms-listings .listings-header .filter-sort-group .filter-toggle {
      display: none;
    }
  }

  .ms-listings .listings-header .filter-sort-group .filter-toggle {
    gap: var(--space-3xs);
    flex-direction: row;
    padding: 2px;
  }

  .ms-listings .listings-header .filter-sort-group .sort {
    align-items: center;
    gap: var(--space-2xs);
    flex-direction: row;
    display: flex;
  }

  .ms-listings .listings-header .filter-sort-group .sort .sort-label {
    white-space: nowrap;
    font-style: italic;
  }

  @media (max-width: 500px) {
    .ms-listings .listings-header .filter-sort-group .sort .sort-label {
      display: none;
    }
  }

  .ms-listings .listings-header .filter-sort-group #listings-search {
    flex-grow: 1;
  }

  @media (max-width: 500px) {
    .ms-listings .listings-header .filter-sort-group #listings-search {
      width: 100%;
      margin-left: -5px;
    }
  }

  .ms-listings .save-search {
    align-items: center;
    gap: var(--space-3xs);
    background-color: var(--brand-red);
    color: #fff;
    flex-direction: row;
    display: flex;
  }

  .ms-listings .save-search img {
    filter: invert();
  }

  .ms-listings #alert-banner {
    width: 100%;
  }

  .ms-listings #alert-banner:empty {
    display: none;
  }

  .ms-listings .alert-success {
    justify-content: center;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-s);
    background-color: var(--green-50);
    color: var(--green-900);
    border: 1px solid var(--green-300);
    font-size: var(--step--1);
    text-align: center;
    margin-bottom: var(--space-s);
    border-radius: 4px;
    display: flex;
  }

  .ms-listings .alert-success img {
    display: none;
  }

  .ms-listings .no-results {
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-xl);
    text-align: center;
    user-select: none;
    flex-direction: column;
    grid-column: 1 / -1;
    display: flex;
  }

  .ms-listings .no-listings {
    grid-column: 1 / -1;
  }

  .ms-listings nav.ms-pagination {
    margin-top: var(--space-xl);
  }

  .ms-listings .items {
    margin-top: var(--space-2xs);
    column-gap: var(--space-xs);
    row-gap: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-flow: dense;
    display: grid;
  }

  .ms-listings .items > li {
    padding: 0;
    list-style: none;
  }

  .overlay {
    pointer-events: none;
    display: none;
  }

  @media (max-width: 768px) {
    .ms-filters-sidebar {
      background-color: var(--card-bg-color);
      z-index: 1000;
      height: 100%;
      padding: var(--space-xs);
      transition: transform .3s;
      position: fixed;
      top: 0;
      left: 0;
      overflow-y: auto;
      transform: translateX(-100%);
      box-shadow: 2px 0 5px #0000004d;
    }

    .overlay {
      transition: opacity .3s;
    }

    @starting-style {
      .overlay {
        opacity: 0;
      }
    }

    .overlay {
      z-index: 900;
      cursor: pointer;
      pointer-events: auto;
      background: #00000080;
      display: none;
      position: fixed;
      inset: 0;
    }

    :not(#filter-toggle:checked) ~ .ms-listings {
      grid-template-columns: 1fr;
    }

    #filter-toggle:checked ~ .ms-listings {
      grid-template-columns: 1fr;
    }

    #filter-toggle:checked ~ .ms-listings .ms-filters-sidebar {
      transform: translateX(0);
    }

    #filter-toggle:checked + .overlay {
      display: block;
    }

    .ms-listings:has(.ms-btn-cta) .filter-sort-group:after {
      content: "";
      height: calc(50px + var(--space-s) * 2 + env(safe-area-inset-bottom, 0));
      z-index: 99;
      pointer-events: none;
      background-color: #fff;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      box-shadow: 0 -2px 10px #0000001a;
    }

    .filter-sort-group .ms-btn-cta {
      bottom: calc(var(--space-s)  + env(safe-area-inset-bottom, 0));
      left: var(--space-s);
      right: var(--space-s);
      width: calc(100% - 2 * var(--space-s));
      z-index: 100;
      margin: 0;
      position: fixed;
    }

    .ms-listings:has(.filter-sort-group .ms-btn-cta) {
      padding-bottom: calc(50px + env(safe-area-inset-bottom, 0)  + var(--space-m) * 2);
    }
  }

  .ms-product-summary {
    flex-direction: column-reverse;
    align-items: flex-start;
    display: flex;
  }

  .ms-product-summary > * {
    width: 100%;
  }

  .ms-product-summary.grey {
    filter: grayscale();
  }

  .ms-product-summary .product-summary--image {
    object-fit: cover;
    aspect-ratio: 1;
    border-image: url("/assets/svg/frame.svg") 27 / 10px;
    width: 100%;
    min-width: 250px;
    padding: 7px;
    transition: transform .3s, box-shadow .3s;
  }

  @media (min-width: 600px) {
    .ms-product-summary .product-summary--image:hover {
      transform: scale(1.01);
      box-shadow: 0 5px 10px #2600004d;
    }
  }

  .ms-product-summary > .product-summary--details {
    padding-top: var(--space-xs);
    gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  .ms-product-summary > .product-summary--details > span {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  .ms-product-summary > .product-summary--details > a {
    font-family: var(--font-p);
    font-size: var(--step-0);
    padding-top: var(--space-3xs);
  }

  @media (max-width: 768px) {
    .ms-product-summary > .product-summary--details > a {
      font-size: var(--step-1);
    }
  }

  .ms-reputation {
    row-gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  .ms-reputation > header {
    flex-direction: row;
    align-items: flex-start;
    column-gap: 1rem;
    display: flex;
  }

  .ms-reputation > header > img {
    object-fit: contain;
    align-self: stretch;
    height: 70px;
  }

  .ms-reputation > header > div .seller-stats {
    margin-top: var(--space-3xs);
    gap: var(--space-m);
    flex-direction: row;
    display: flex;
  }

  .ms-reputation .line {
    content: "";
    background-image: url("/assets/svg/line.svg");
    background-repeat: repeat-x;
    width: 100%;
    height: 2px;
    display: block;
  }

  .ms-reputation .reviews-header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .ms-reputation .feedback-list {
    padding-top: var(--space-s);
    gap: var(--space-s);
    grid-template-columns: 1fr 1fr;
    display: grid;
  }

  .ms-reputation .feedback-list > .feedback-item .feedback-header {
    column-gap: var(--space-xs);
    flex-direction: row;
    align-items: baseline;
    display: flex;
  }

  .ms-reputation .feedback-list > .feedback-item .feedback-body {
    margin-top: var(--space-2xs);
  }

  .ms-reputation .feedback-list > .feedback-item .feedback-icon {
    aspect-ratio: 1;
    height: calc(var(--step-0)  + var(--space-xs));
    background-color: var(--background-body);
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .ms-reputation .feedback-list > .feedback-item .feedback-icon > img {
    height: var(--step-0);
    width: var(--step-0);
  }

  .ms-reputation .feedback-footer {
    margin-top: var(--space-l);
    justify-content: space-between;
    justify-self: stretch;
    display: flex;
  }

  .ms-reputation .feedback-footer > .feedback-stats {
    column-gap: var(--space-xs);
    font-size: var(--step--1);
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  .table-container {
    overflow-x: auto;
  }

  .figure-table {
    border-collapse: separate;
    border-spacing: 0;
    text-align: left;
    width: 100%;
    padding-left: 0;
  }

  .figure-table tr {
    vertical-align: top;
    font-size: var(--step--1);
  }

  .figure-table tr td, .figure-table tr th {
    padding: var(--space-3xs);
  }

  .figure-table tr .options-cell {
    font-size: var(--step--2);
  }

  .figure-table thead tr, .figure-table tbody tr:last-child td {
    background-image: url("/assets/svg/line.svg");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 2px;
  }

  .figure-table th {
    font-family: var(--font-sc);
    text-wrap: nowrap;
    font-weight: normal;
  }

  .figure-table .or-label {
    color: var(--text-primary);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    border-left: 1px solid var(--text-primary);
    border-right: 1px solid var(--text-primary);
    width: 1%;
    padding-inline: var(--space-3xs);
    background-image: url("/assets/svg/line.svg");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 2px;
    font-size: 12px;
    font-weight: 600;
  }

  .figure-table .options-cell .options-toggle {
    display: none;
  }

  .figure-table .options-cell .options-content {
    line-height: 1.4;
    display: inline;
  }

  .figure-table .options-cell .options-toggle:not(:checked) ~ .options-content {
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    overflow: hidden;
  }

  .figure-table .options-cell .options-expand {
    cursor: pointer;
    white-space: nowrap;
    text-decoration: underline;
  }

  .figure-table .options-cell .options-expand .show-less {
    display: none;
  }

  .figure-table .options-cell .options-toggle:checked ~ .options-expand .show-more {
    display: none;
  }

  .figure-table .options-cell .options-toggle:checked ~ .options-expand .show-less {
    display: inline;
  }

  .ms-sticky-only {
    display: none;
  }

  .ms-sticky.is-stuck .ms-sticky-only {
    display: initial;
  }

  .ms-modal {
    background: var(--card-bg-color);
    border: none;
    border-image: var(--card-border);
    max-height: 80vh;
    max-width: var(--content-max-width);
    padding: var(--space-s);
    margin: auto;
  }

  .ms-modal::backdrop {
    background-color: var(--overlay-bg-color);
  }

  .ms-modal header {
    justify-content: space-between;
    align-items: center;
    column-gap: var(--space-xs);
    flex-direction: row;
    display: flex;
    margin-top: 0 !important;
  }

  .ms-modal header > h1 {
    font-family: var(--font-sc);
    font-size: var(--step-1);
  }

  .ms-modal header > p {
    color: var(--text-secondary);
  }

  .ms-modal header * {
    margin-top: 0;
  }

  .ms-modal .ms-line {
    margin-top: var(--space-2xs);
    margin-bottom: var(--space-2xs);
  }

  .ms-line {
    background-image: url("/assets/svg/line.svg");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 3px;
    height: 3px;
    display: block;
  }

  body:has(dialog.ms-modal[open]) {
    overflow: hidden;
  }

  ms-menu[popover] {
    padding: var(--space-2xs);
    background: var(--card-bg-color);
    min-width: 175px;
    max-height: 80vh;
    inset: unset;
    opacity: 0;
    border-image: url("/assets/svg/frame-2.svg") 10 / 10px / 3px;
    margin: 0;
    list-style: none;
    left: -9999px;
    box-shadow: 0 2px 1px #00000017, 0 4px 2px #00000017, 0 8px 4px #00000017, 0 8px 12px #00000017, 0 0 5px #00000017;
  }

  ms-menu[popover] ul {
    padding-left: 0;
  }

  ms-menu[popover] li {
    list-style: none;
  }

  ms-menu[popover] li button {
    padding: 0;
  }

  ms-menu[popover] {
    transform-origin: top;
    transition: opacity .1s ease-out, transform .15s cubic-bezier(.34, 1.56, .64, 1);
    transform: translateY(0)scale(.95);
  }

  ms-menu[popover]:popover-open {
    opacity: 1;
    transform: translateY(0)scale(1);
  }

  @starting-style {
    ms-menu[popover]:popover-open {
      opacity: 0;
      transform: translateY(-10px)scale(.95);
    }
  }

  ms-menu[popover]::backdrop {
    background: none;
  }

  ms-banner {
    padding: var(--space-s);
    border-image: var(--card-border);
    border-image-width: 50px;
    display: flex;
    box-shadow: 0 50px 100px -20px #32325d40, 0 30px 60px -30px #0000004d, inset 0 -2px 6px #1e0a4059;
  }

  ms-banner > strong {
    font-weight: normal;
  }

  ms-banner.warning {
    background-color: var(--color-amber-100);
  }

  .address-validation-container .display {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .address-validation-container .validation-header {
    margin-bottom: var(--space-xs);
  }

  .address-validation-container .address-comparison {
    justify-content: center;
    gap: var(--space-m);
    padding-top: var(--space-xs);
    flex-flow: wrap;
    display: flex;
  }

  .address-validation-container .address-card {
    flex-grow: 1;
  }

  .address-validation-container .actions {
    margin-top: var(--space-m);
    gap: var(--space-s);
    display: flex;
  }

  #stripe-connect-banner {
    background-color: var(--card-bg-color);
    grid-area: stripe-banner;
    width: 100%;
  }

  #stripe-connect-banner.hidden {
    opacity: 0;
    height: 0;
  }

  .ms-markdown h2 {
    margin-top: var(--space-m);
  }

  .ms-markdown li {
    max-width: 80ch;
  }

  .ms-banner {
    background-color: var(--brand-red);
    width: calc(100% + (var(--space-2xs) * 2));
    padding: var(--space-3xs);
    margin-bottom: var(--space-xs);
  }

  .ms-banner .back {
    color: #fff;
    text-wrap: nowrap;
    font-family: var(--font-p);
    font-size: var(--step--1);
    justify-content: center;
    display: flex;
  }

  .ms-banner .back .ms-fi {
    margin-inline: var(--space-2xs);
  }

  .ms-banner .back:hover {
    text-decoration: none;
  }

  .ms-banner .free-shipping {
    color: #fff;
    text-wrap: nowrap;
    font-family: var(--font-p);
    font-size: var(--step--1);
    justify-content: center;
    display: flex;
  }

  .ms-fib, .ms-fi {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
  }

  :is(.ms-fib, .ms-fi).at {
    background-image: url("/assets/svg/flags/at.svg");
  }

  :is(.ms-fib, .ms-fi).au {
    background-image: url("/assets/svg/flags/au.svg");
  }

  :is(.ms-fib, .ms-fi).be {
    background-image: url("/assets/svg/flags/be.svg");
  }

  :is(.ms-fib, .ms-fi).bg {
    background-image: url("/assets/svg/flags/bg.svg");
  }

  :is(.ms-fib, .ms-fi).ca {
    background-image: url("/assets/svg/flags/ca.svg");
  }

  :is(.ms-fib, .ms-fi).ch {
    background-image: url("/assets/svg/flags/ch.svg");
  }

  :is(.ms-fib, .ms-fi).cy {
    background-image: url("/assets/svg/flags/cy.svg");
  }

  :is(.ms-fib, .ms-fi).cz {
    background-image: url("/assets/svg/flags/cz.svg");
  }

  :is(.ms-fib, .ms-fi).de {
    background-image: url("/assets/svg/flags/de.svg");
  }

  :is(.ms-fib, .ms-fi).dk {
    background-image: url("/assets/svg/flags/dk.svg");
  }

  :is(.ms-fib, .ms-fi).ee {
    background-image: url("/assets/svg/flags/ee.svg");
  }

  :is(.ms-fib, .ms-fi).es {
    background-image: url("/assets/svg/flags/es.svg");
  }

  :is(.ms-fib, .ms-fi).fi {
    background-image: url("/assets/svg/flags/fi.svg");
  }

  :is(.ms-fib, .ms-fi).fr {
    background-image: url("/assets/svg/flags/fr.svg");
  }

  :is(.ms-fib, .ms-fi).gb {
    background-image: url("/assets/svg/flags/gb.svg");
  }

  :is(.ms-fib, .ms-fi).gi {
    background-image: url("/assets/svg/flags/gi.svg");
  }

  :is(.ms-fib, .ms-fi).gr {
    background-image: url("/assets/svg/flags/gr.svg");
  }

  :is(.ms-fib, .ms-fi).hr {
    background-image: url("/assets/svg/flags/hr.svg");
  }

  :is(.ms-fib, .ms-fi).hu {
    background-image: url("/assets/svg/flags/hu.svg");
  }

  :is(.ms-fib, .ms-fi).ie {
    background-image: url("/assets/svg/flags/ie.svg");
  }

  :is(.ms-fib, .ms-fi).it {
    background-image: url("/assets/svg/flags/it.svg");
  }

  :is(.ms-fib, .ms-fi).jp {
    background-image: url("/assets/svg/flags/jp.svg");
  }

  :is(.ms-fib, .ms-fi).li {
    background-image: url("/assets/svg/flags/li.svg");
  }

  :is(.ms-fib, .ms-fi).lt {
    background-image: url("/assets/svg/flags/lt.svg");
  }

  :is(.ms-fib, .ms-fi).lu {
    background-image: url("/assets/svg/flags/lu.svg");
  }

  :is(.ms-fib, .ms-fi).lv {
    background-image: url("/assets/svg/flags/lv.svg");
  }

  :is(.ms-fib, .ms-fi).mt {
    background-image: url("/assets/svg/flags/mt.svg");
  }

  :is(.ms-fib, .ms-fi).mx {
    background-image: url("/assets/svg/flags/mx.svg");
  }

  :is(.ms-fib, .ms-fi).nl {
    background-image: url("/assets/svg/flags/nl.svg");
  }

  :is(.ms-fib, .ms-fi).no {
    background-image: url("/assets/svg/flags/no.svg");
  }

  :is(.ms-fib, .ms-fi).nz {
    background-image: url("/assets/svg/flags/nz.svg");
  }

  :is(.ms-fib, .ms-fi).pl {
    background-image: url("/assets/svg/flags/pl.svg");
  }

  :is(.ms-fib, .ms-fi).pt {
    background-image: url("/assets/svg/flags/pt.svg");
  }

  :is(.ms-fib, .ms-fi).ro {
    background-image: url("/assets/svg/flags/ro.svg");
  }

  :is(.ms-fib, .ms-fi).se {
    background-image: url("/assets/svg/flags/se.svg");
  }

  :is(.ms-fib, .ms-fi).si {
    background-image: url("/assets/svg/flags/si.svg");
  }

  :is(.ms-fib, .ms-fi).sk {
    background-image: url("/assets/svg/flags/sk.svg");
  }

  :is(.ms-fib, .ms-fi).us {
    background-image: url("/assets/svg/flags/us.svg");
  }

  .ms-fi {
    width: 1.33333em;
    line-height: 1em;
    display: inline-block;
    position: relative;
  }

  .ms-fi:before {
    content: " ";
  }

  .ms-fi.fis {
    width: 1em;
  }

  .ms-image-upload-inline {
    gap: var(--space-xs);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  .ms-image-upload-inline h4 {
    font-family: var(--font-sc);
    font-size: var(--step-0);
    margin: 0;
  }

  .ms-image-upload-inline .upload-area {
    isolation: isolate;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
    min-height: 120px;
    display: grid;
  }

  .ms-image-upload-inline .upload-area > * {
    grid-area: 1 / 1;
    min-height: 120px;
  }

  .ms-image-upload-inline .drop-zone {
    padding: var(--space-m);
    text-align: center;
    cursor: pointer;
    background: var(--background-body);
    z-index: 1;
    border-image: url("/assets/svg/frame.svg") 27 / 10px;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    transition: all .2s;
    display: flex;
  }

  .ms-image-upload-inline .drop-zone.drag-over {
    transform: scale(1.02);
  }

  .ms-image-upload-inline .drop-zone.error {
    outline: 2px solid var(--ms-error);
    outline-offset: -3px;
  }

  .ms-image-upload-inline .drop-zone .drop-zone-content {
    align-items: center;
    gap: var(--space-2xs);
    pointer-events: none;
    flex-direction: column;
    display: flex;
  }

  .ms-image-upload-inline .drop-zone .drop-zone-content svg {
    color: var(--text-primary);
  }

  .ms-image-upload-inline .drop-zone .drop-zone-content p {
    font-family: var(--font-sc);
    font-size: var(--step-0);
    margin: 0;
  }

  .ms-image-upload-inline .drop-zone .drop-zone-content span {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  .ms-image-upload-inline .drop-zone .drop-zone-content span.error-text {
    color: var(--ms-error);
    font-weight: bold;
  }

  .ms-image-upload-inline .image-gallery {
    gap: var(--space-xs);
    flex-wrap: wrap;
    align-content: flex-start;
    display: flex;
    position: relative;
  }

  .ms-image-upload-inline .image-gallery:before {
    content: "";
    pointer-events: auto;
    width: 80px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -80px;
  }

  .ms-image-upload-inline .image-gallery .add-more-thumbnail {
    background: var(--background-body);
    width: 150px;
    height: 150px;
    color: var(--text-primary);
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: var(--space-3xs);
    border-image: url("/assets/svg/frame.svg") 27 / 10px;
    flex-direction: column;
    flex-shrink: 0;
    transition: all .2s;
    display: flex;
    position: relative;
  }

  .ms-image-upload-inline .image-gallery .add-more-thumbnail:hover {
    border-color: var(--brand-red);
    transform: scale(1.05);
  }

  .ms-image-upload-inline .image-gallery .add-more-thumbnail.drag-over {
    border-color: var(--brand-red);
    transform: scale(1.08);
  }

  .ms-image-upload-inline .image-gallery .add-more-thumbnail svg {
    color: currentColor;
  }

  .ms-image-upload-inline .image-gallery .add-more-thumbnail span {
    font-size: var(--step--2);
    font-family: var(--font-sc);
  }

  .ms-image-upload-inline .image-gallery .image-item {
    cursor: grab;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    border-image: url("/assets/svg/frame.svg") 27 / 10px;
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    padding: 4px;
    transition: all .2s;
    position: relative;
  }

  .ms-image-upload-inline .image-gallery .image-item:hover {
    border-color: var(--brand-red);
    transform: scale(1.05);
  }

  .ms-image-upload-inline .image-gallery .image-item.dragging {
    opacity: .5;
    cursor: grabbing;
    transform: rotate(5deg);
  }

  .ms-image-upload-inline .image-gallery .image-item.processing, .ms-image-upload-inline .image-gallery .image-item.uploading {
    cursor: default;
  }

  :is(.ms-image-upload-inline .image-gallery .image-item.processing, .ms-image-upload-inline .image-gallery .image-item.uploading) img {
    opacity: .6;
  }

  .ms-image-upload-inline .image-gallery .image-item.error {
    cursor: default;
  }

  .ms-image-upload-inline .image-gallery .image-item.error img {
    opacity: .8;
    filter: grayscale() sepia() hue-rotate(300deg) saturate(2);
  }

  .ms-image-upload-inline .image-gallery .image-item .thumbnail-badge {
    background: var(--brand-red);
    color: #fff;
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--step--2);
    font-family: var(--font-sc);
    z-index: 10;
    pointer-events: none;
    position: absolute;
    top: 4px;
    left: 4px;
  }

  .ms-image-upload-inline .image-gallery .image-item img {
    object-fit: cover;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    width: 100%;
    height: 100%;
  }

  .ms-image-upload-inline .image-gallery .image-item .upload-overlay, .ms-image-upload-inline .image-gallery .image-item .error-overlay {
    color: #fff;
    font-size: var(--step--1);
    background: #000000b3;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    inset: 0;
  }

  .ms-image-upload-inline .image-gallery .image-item .upload-progress {
    text-align: center;
    width: 80%;
  }

  .ms-image-upload-inline .image-gallery .image-item .upload-progress .spinner {
    width: 30px;
    height: 30px;
    margin: 0 auto var(--space-3xs);
    border: 3px solid #ffffff4d;
    border-top-color: #fff;
    border-radius: 50%;
    animation: 1s linear infinite spin;
  }

  .ms-image-upload-inline .image-gallery .image-item .upload-progress .progress-bar {
    width: 100%;
    height: 4px;
    margin-bottom: var(--space-3xs);
    background: #ffffff4d;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
  }

  .ms-image-upload-inline .image-gallery .image-item .upload-progress .progress-bar .progress-fill {
    background: #fff;
    height: 100%;
    transition: width .3s;
  }

  .ms-image-upload-inline .image-gallery .image-item .error-message {
    text-align: center;
    padding: var(--space-2xs);
  }

  .ms-image-upload-inline .image-gallery .image-item .error-message span {
    margin-bottom: var(--space-3xs);
    display: block;
  }

  .ms-image-upload-inline .image-gallery .image-item .error-message .retry-btn {
    color: var(--ms-error);
    padding: var(--space-3xs) var(--space-2xs);
    cursor: pointer;
    font-size: var(--step--1);
    background: #fff;
    border: none;
    border-radius: 3px;
  }

  .ms-image-upload-inline .image-gallery .image-item .error-message .retry-btn:hover {
    background: var(--ms-error);
    color: #fff;
  }

  .ms-image-upload-inline .image-gallery .image-item .delete-btn {
    cursor: pointer;
    width: 24px;
    height: 24px;
    color: var(--ms-error);
    opacity: 0;
    z-index: 10;
    background: #ffffffe6;
    border: none;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    line-height: 1;
    transition: opacity .2s;
    display: flex;
    position: absolute;
    top: 4px;
    right: 4px;
  }

  .ms-image-upload-inline .image-gallery .image-item .delete-btn:hover {
    background: #fff;
  }

  .ms-image-upload-inline .image-gallery .image-item:hover .delete-btn {
    opacity: 1;
  }

  @media (hover: none) {
    .ms-image-upload-inline .image-gallery .image-item .delete-btn {
      opacity: 1;
    }
  }

  .ms-image-upload-inline .image-gallery .image-item .edited-badge {
    color: #fff;
    padding: var(--space-3xs);
    z-index: 9;
    pointer-events: none;
    background: #0064ffe6;
    border-radius: 3px;
    justify-content: center;
    align-items: center;
    display: flex;
    position: absolute;
    top: 4px;
    left: 4px;
  }

  .ms-image-upload-inline .image-gallery .image-item .edited-badge svg {
    width: 14px;
    height: 14px;
  }

  .ms-image-upload-inline .image-gallery .image-item.edited {
    cursor: pointer;
  }

  .ms-image-upload-inline .image-gallery .image-item.edited:hover {
    border-color: #0064ff80;
  }

  .ms-image-upload-inline .add-image--input, .ms-image-upload-inline .hidden-inputs {
    display: none;
  }

  .ms-image-upload-inline .image-editor-modal {
    z-index: 1000;
    justify-content: center;
    align-items: center;
    display: flex;
    position: fixed;
    inset: 0;
  }

  .ms-image-upload-inline .image-editor-modal[hidden] {
    display: none;
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-backdrop {
    z-index: 1;
    background: #000000b3;
    position: fixed;
    inset: 0;
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-content {
    z-index: 2;
    background: var(--background-body);
    border-image: url("/assets/svg/frame.svg") 27 / 5px;
    border-radius: 0;
    flex-direction: column;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    display: flex;
    position: relative;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .image-editor-content {
      width: 90vw;
      max-width: 1200px;
      height: auto;
      max-height: 90vh;
    }
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-header {
    padding: var(--space-s);
    flex-shrink: 0;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .image-editor-header {
      padding: var(--space-m);
    }
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-header h3 {
    font-family: var(--font-sc);
    font-size: var(--step-0);
    margin: 0;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .image-editor-header h3 {
      font-size: var(--step-1);
    }
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-header .close-btn {
    font-size: var(--step-1);
    cursor: pointer;
    color: var(--text-primary);
    background: none;
    border: none;
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    display: flex;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .image-editor-header .close-btn {
      font-size: var(--step-2);
    }
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-header .close-btn:hover {
    background: #0000001a;
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-body {
    padding: var(--space-s);
    gap: var(--space-s);
    flex-direction: column;
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .image-editor-body {
      padding: var(--space-m);
      gap: var(--space-m);
      flex-direction: row;
    }
  }

  .ms-image-upload-inline .image-editor-modal .image-preview-container {
    flex: 0 auto;
    justify-content: center;
    align-items: center;
    min-height: 0;
    max-height: 30vh;
    display: flex;
    position: relative;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .image-preview-container {
      flex: 1;
      max-height: none;
    }
  }

  .ms-image-upload-inline .image-editor-modal .image-preview-container .image-preview {
    object-fit: contain;
    max-width: 100%;
    max-height: 100%;
    transition: opacity .3s;
  }

  .ms-image-upload-inline .image-editor-modal .image-preview-container.loading .image-preview {
    opacity: .5;
  }

  .ms-image-upload-inline .image-editor-modal .image-preview-container.loading:after {
    content: "";
    border: 4px solid #ffffff4d;
    border-top-color: var(--brand-red);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: 1s linear infinite spin;
    position: absolute;
  }

  .ms-image-upload-inline .image-editor-modal .editor-controls {
    gap: var(--space-s);
    flex-direction: column;
    flex: 0 auto;
    min-height: 0;
    max-height: 50vh;
    display: flex;
    overflow-y: auto;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .editor-controls {
      gap: var(--space-m);
      flex: 0 0 250px;
      max-height: none;
      overflow-y: visible;
    }
  }

  .ms-image-upload-inline .image-editor-modal .control-group {
    align-items: center;
    gap: var(--space-2xs);
    flex-direction: row;
    display: flex;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .control-group {
      gap: var(--space-xs);
    }
  }

  .ms-image-upload-inline .image-editor-modal .control-group .control-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  .ms-image-upload-inline .image-editor-modal .control-group label {
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--font-sc);
    font-size: var(--step-0);
    display: flex;
  }

  .ms-image-upload-inline .image-editor-modal .control-group input[type="range"] {
    width: 100%;
  }

  .ms-image-upload-inline .image-editor-modal .control-group input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: var(--brand-red);
    cursor: pointer;
    border-radius: 50%;
    width: 18px;
    height: 18px;
  }

  .ms-image-upload-inline .image-editor-modal .control-group input[type="range"]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
  }

  .ms-image-upload-inline .image-editor-modal .control-group input[type="range"]::-moz-range-thumb {
    background: var(--brand-red);
    cursor: pointer;
    border: none;
    border-radius: 50%;
    width: 18px;
    height: 18px;
  }

  .ms-image-upload-inline .image-editor-modal .control-group input[type="range"]::-moz-range-thumb:hover {
    transform: scale(1.1);
  }

  .ms-image-upload-inline .image-editor-modal .control-group input[type="checkbox"] {
    margin-right: var(--space-2xs);
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row {
    gap: var(--space-2xs);
    align-items: center;
    display: flex;
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row input[type="color"] {
    border: 2px solid var(--text-secondary);
    cursor: pointer;
    background: none;
    border-radius: 4px;
    width: 60px;
    height: 32px;
    padding: 2px;
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row input[type="color"]::-webkit-color-swatch {
    border: none;
    border-radius: 2px;
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row input[type="color"]::-moz-color-swatch {
    border: none;
    border-radius: 2px;
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row .transparent-btn {
    padding: var(--space-2xs) var(--space-xs);
    border: 2px solid var(--text-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-sc);
    font-size: var(--step--1);
    background: none;
    border-radius: 4px;
    flex: 1;
    transition: all .2s;
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row .transparent-btn:hover {
    border-color: var(--brand-red);
    color: var(--brand-red);
  }

  .ms-image-upload-inline .image-editor-modal .control-group .color-picker-row .transparent-btn.active {
    background: var(--brand-red);
    color: #fff;
    border-color: var(--brand-red);
  }

  .ms-image-upload-inline .image-editor-modal .control-group.background-color-group {
    border-top: 1px solid var(--text-secondary);
    padding-top: var(--space-xs);
    margin-top: var(--space-2xs);
  }

  .ms-image-upload-inline .image-editor-modal .image-editor-footer {
    justify-content: flex-end;
    gap: var(--space-xs);
    padding: var(--space-s);
    background-color: var(--card-bg-color);
    flex-shrink: 0;
    display: flex;
  }

  @media (min-width: 768px) {
    .ms-image-upload-inline .image-editor-modal .image-editor-footer {
      padding: var(--space-m);
    }
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }

  .drag-preview {
    pointer-events: none;
    z-index: 10000;
    opacity: .7;
    will-change: transform;
    border-image: url("/assets/svg/frame.svg") 27 / 10px;
    width: 150px;
    height: 150px;
    margin-top: -75px;
    margin-left: -75px;
    padding: 4px;
    position: fixed;
  }

  .drag-preview img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .drag-preview .thumbnail-badge, .drag-preview .edited-badge, .drag-preview .delete-btn {
    display: none;
  }

  .ms-modal.save-template-modal {
    min-width: 300px;
  }

  .ms-modal.save-template-modal .modal-body {
    gap: var(--space-s);
    padding-bottom: var(--space-s);
    padding-top: var(--space-xs);
    flex-direction: column;
    display: flex;
  }

  .ms-modal.save-template-modal .modal-footer {
    display: flex;
  }

  .ms-modal.save-template-modal .save-btn {
    width: 100%;
  }

  .ms-modal.template-selection-modal {
    min-width: 300px;
  }

  .ms-modal.template-selection-modal .template-list {
    padding-bottom: var(--space-s);
  }

  .ms-modal.template-selection-modal .template-list li {
    padding-top: var(--space-xs);
    list-style: none;
  }

  .ms-modal.template-selection-modal .template-list li button {
    text-align: left;
    user-select: none;
    background: none;
    border: none;
    width: 100%;
    padding-block: 0;
    padding-inline: 0;
  }

  .ms-modal.template-selection-modal .template-list li button:hover {
    cursor: pointer;
    color: var(--brand-red);
  }

  .ms-modal.template-selection-modal .template-list li button:hover span {
    color: var(--brand-red);
  }

  .ms-modal.template-selection-modal .template-list li button span {
    color: var(--text-secondary);
  }

  .ms-modal.template-selection-modal .template-list li button:focus-visible {
    color: var(--brand-red);
    outline-color: var(--brand-red);
  }

  .ms-modal.template-selection-modal .template-list li button:focus-visible span {
    color: var(--brand-red);
  }

  .ms-modal.template-selection-modal .modal-footer {
    display: flex;
  }

  .ms-modal.template-selection-modal .save-btn {
    width: 100%;
  }

  .related-items {
    gap: var(--space-l);
    margin-top: var(--space-l);
    margin-bottom: var(--space-m);
    flex-direction: column;
    display: flex;
  }

  .related-items .related-items--section .related-items--section-header {
    margin-bottom: var(--space-s);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  .related-items .related-items--section .related-items--section-header h3 {
    font-family: var(--font-p);
    font-size: var(--step-1);
    margin: 0;
  }

  .related-items .related-items--section h3 {
    font-family: var(--font-p);
    font-size: var(--step-1);
    margin-bottom: var(--space-s);
  }

  .related-items .related-items--section .items {
    column-gap: var(--space-xs);
    row-gap: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-flow: dense;
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
  }

  .related-items .related-items--section .items > li {
    padding: 0;
    list-style: none;
  }
}

@layer vendor {
  :root {
    --aa-search-input-height: 44px;
    --aa-input-icon-size: 20px;
    --aa-base-unit: 16;
    --aa-spacing-factor: 1;
    --aa-spacing: calc(var(--aa-base-unit) * var(--aa-spacing-factor) * 1px);
    --aa-spacing-half: calc(var(--aa-spacing) / 2);
    --aa-panel-max-height: 650px;
    --aa-base-z-index: 9999;
    --aa-font-size: calc(var(--aa-base-unit) * 1px);
    --aa-font-family: inherit;
    --aa-font-weight-medium: 500;
    --aa-font-weight-semibold: 600;
    --aa-font-weight-bold: 700;
    --aa-icon-size: 20px;
    --aa-icon-stroke-width: 1.6;
    --aa-icon-color-rgb: 119, 119, 163;
    --aa-icon-color-alpha: 1;
    --aa-action-icon-size: 20px;
    --aa-text-color-rgb: 38, 38, 39;
    --aa-text-color-alpha: 1;
    --aa-primary-color-rgb: 62, 52, 211;
    --aa-primary-color-alpha: .2;
    --aa-muted-color-rgb: 128, 126, 163;
    --aa-muted-color-alpha: .6;
    --aa-panel-border-color-rgb: 128, 126, 163;
    --aa-panel-border-color-alpha: .3;
    --aa-input-border-color-rgb: 128, 126, 163;
    --aa-input-border-color-alpha: .8;
    --aa-background-color-rgb: 255, 255, 255;
    --aa-background-color-alpha: 1;
    --aa-input-background-color-rgb: 255, 255, 255;
    --aa-input-background-color-alpha: 1;
    --aa-selected-color-rgb: 179, 173, 214;
    --aa-selected-color-alpha: .205;
    --aa-description-highlight-background-color-rgb: 245, 223, 77;
    --aa-description-highlight-background-color-alpha: .5;
    --aa-detached-media-query: (max-width:680px);
    --aa-detached-modal-media-query: (min-width:680px);
    --aa-detached-modal-max-width: 680px;
    --aa-detached-modal-max-height: 500px;
    --aa-overlay-color-rgb: 115, 114, 129;
    --aa-overlay-color-alpha: .4;
    --aa-panel-shadow: 0 0 0 1px #23263b1a, 0 6px 16px -4px #23263b26;
    --aa-scrollbar-width: 13px;
    --aa-scrollbar-track-background-color-rgb: 234, 234, 234;
    --aa-scrollbar-track-background-color-alpha: 1;
    --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);
    --aa-scrollbar-thumb-background-color-alpha: 1;
  }

  @media (hover: none) and (pointer: coarse) {
    :root {
      --aa-spacing-factor: 1.2;
      --aa-action-icon-size: 22px;
    }
  }

  body.dark, body[data-theme="dark"] {
    --aa-text-color-rgb: 183, 192, 199;
    --aa-primary-color-rgb: 146, 138, 255;
    --aa-muted-color-rgb: 146, 138, 255;
    --aa-input-background-color-rgb: 0, 3, 9;
    --aa-background-color-rgb: 21, 24, 42;
    --aa-selected-color-rgb: 146, 138, 255;
    --aa-selected-color-alpha: .25;
    --aa-description-highlight-background-color-rgb: 0 255 255;
    --aa-description-highlight-background-color-alpha: .25;
    --aa-icon-color-rgb: 119, 119, 163;
    --aa-panel-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
    --aa-scrollbar-track-background-color-rgb: 44, 46, 64;
    --aa-scrollbar-thumb-background-color-rgb: var(--aa-background-color-rgb);
  }

  .aa-Autocomplete *, .aa-DetachedFormContainer *, .aa-Panel * {
    box-sizing: border-box;
  }

  .aa-Autocomplete, .aa-DetachedFormContainer, .aa-Panel {
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
    font-family: inherit;
    font-family: var(--aa-font-family);
    font-size: 16px;
    font-size: var(--aa-font-size);
    text-align: left;
    margin: 0;
    padding: 0;
    font-weight: 400;
    line-height: 1em;
  }

  .aa-Form {
    background-color: #fff;
    background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha));
    border: 1px solid #807ea3cc;
    border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));
    border-radius: 3px;
    align-items: center;
    width: 100%;
    margin: 0;
    line-height: 1em;
    display: flex;
    position: relative;
  }

  .aa-Form:focus-within {
    border-color: #3e34d3;
    border-color: rgba(var(--aa-primary-color-rgb), 1);
    box-shadow: 0 0 0 2px #3e34d333, inset 0 0 0 2px #3e34d333;
    box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px, inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px;
    outline: none;
  }

  .aa-InputWrapperPrefix {
    height: 44px;
    height: var(--aa-search-input-height);
    flex-shrink: 0;
    order: 1;
    align-items: center;
    display: flex;
  }

  .aa-Label, .aa-LoadingIndicator {
    cursor: auto;
    text-align: left;
    flex-shrink: 0;
    height: 100%;
    padding: 0;
  }

  .aa-Label svg, .aa-LoadingIndicator svg {
    color: rgba(var(--aa-primary-color-rgb), 1);
    height: auto;
    max-height: 20px;
    max-height: var(--aa-input-icon-size);
    stroke-width: 1.6px;
    stroke-width: var(--aa-icon-stroke-width);
    width: 20px;
    width: var(--aa-input-icon-size);
  }

  .aa-LoadingIndicator, .aa-SubmitButton {
    height: 100%;
    padding-left: 11px;
    padding-left: calc(var(--aa-spacing) * .75 - 1px);
    padding-right: 8px;
    padding-right: var(--aa-spacing-half);
    width: 47px;
    width: calc(var(--aa-spacing) * 1.75 + var(--aa-icon-size)  - 1px);
  }

  @media (hover: none) and (pointer: coarse) {
    .aa-LoadingIndicator, .aa-SubmitButton {
      padding-left: 3px;
      padding-left: calc(var(--aa-spacing-half) / 2 - 1px);
      width: 39px;
      width: calc(var(--aa-icon-size)  + var(--aa-spacing) * 1.25 - 1px);
    }
  }

  .aa-SubmitButton {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
  }

  .aa-LoadingIndicator {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .aa-LoadingIndicator[hidden] {
    display: none;
  }

  .aa-InputWrapper {
    order: 3;
    width: 100%;
    position: relative;
  }

  .aa-Input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
    font: inherit;
    height: 44px;
    height: var(--aa-search-input-height);
    background: none;
    border: 0;
    width: 100%;
    padding: 0;
  }

  .aa-Input::-moz-placeholder {
    color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    opacity: 1;
  }

  .aa-Input::placeholder {
    color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    opacity: 1;
  }

  .aa-Input:focus {
    border-color: none;
    box-shadow: none;
    outline: none;
  }

  .aa-Input::-webkit-search-cancel-button, .aa-Input::-webkit-search-decoration, .aa-Input::-webkit-search-results-button, .aa-Input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
  }

  .aa-InputWrapperSuffix {
    height: 44px;
    height: var(--aa-search-input-height);
    order: 4;
    align-items: center;
    display: flex;
  }

  .aa-ClearButton {
    color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    cursor: pointer;
    height: 100%;
    padding: 0 12.8333px;
    padding: 0 calc(var(--aa-spacing) * .83333 - .5px);
    background: none;
    border: 0;
    align-items: center;
    margin: 0;
    display: flex;
  }

  @media (hover: none) and (pointer: coarse) {
    .aa-ClearButton {
      padding: 0 10.1667px;
      padding: 0 calc(var(--aa-spacing) * .66667 - .5px);
    }
  }

  .aa-ClearButton:focus, .aa-ClearButton:hover {
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  }

  .aa-ClearButton[hidden] {
    display: none;
  }

  .aa-ClearButton svg {
    stroke-width: 1.6px;
    stroke-width: var(--aa-icon-stroke-width);
    width: 20px;
    width: var(--aa-icon-size);
  }

  .aa-Panel {
    background-color: #fff;
    background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
    border-radius: 4px;
    border-radius: calc(var(--aa-spacing) / 4);
    box-shadow: 0 0 0 1px #23263b1a, 0 6px 16px -4px #23263b26;
    box-shadow: var(--aa-panel-shadow);
    margin: 8px 0 0;
    transition: opacity .2s ease-in, filter .2s ease-in;
    position: absolute;
    overflow: hidden;
  }

  @media screen and (prefers-reduced-motion) {
    .aa-Panel {
      transition: none;
    }
  }

  .aa-Panel button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
  }

  .aa-PanelLayout {
    height: 100%;
    max-height: 650px;
    max-height: var(--aa-panel-max-height);
    text-align: left;
    margin: 0;
    padding: 0;
    position: relative;
    overflow-y: auto;
  }

  .aa-PanelLayoutColumns--twoGolden {
    grid-template-columns: 39.2% auto;
    padding: 0;
    display: grid;
    overflow: hidden;
  }

  .aa-PanelLayoutColumns--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    display: grid;
    overflow: hidden;
  }

  .aa-PanelLayoutColumns--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
    display: grid;
    overflow: hidden;
  }

  .aa-Panel--stalled .aa-Source {
    filter: grayscale();
    opacity: .8;
  }

  .aa-Panel--scrollable {
    max-height: 650px;
    max-height: var(--aa-panel-max-height);
    padding: 8px;
    padding: var(--aa-spacing-half);
    scrollbar-color: #fff #eaeaea;
    scrollbar-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha)) rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
    scrollbar-width: thin;
    margin: 0;
    overflow: hidden auto;
  }

  .aa-Panel--scrollable::-webkit-scrollbar {
    width: 13px;
    width: var(--aa-scrollbar-width);
  }

  .aa-Panel--scrollable::-webkit-scrollbar-track {
    background-color: #eaeaea;
    background-color: rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
  }

  .aa-Panel--scrollable::-webkit-scrollbar-thumb {
    background-color: #fff;
    background-color: rgba(var(--aa-scrollbar-thumb-background-color-rgb), var(--aa-scrollbar-thumb-background-color-alpha));
    border: 3px solid #eaeaea;
    border: 3px solid rgba(var(--aa-scrollbar-track-background-color-rgb), var(--aa-scrollbar-track-background-color-alpha));
    border-right-width: 2px;
    border-radius: 9999px;
  }

  .aa-Source {
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .aa-Source:empty {
    display: none;
  }

  .aa-SourceNoResults {
    padding: 16px;
    padding: var(--aa-spacing);
    margin: 0;
    font-size: 1em;
  }

  .aa-List {
    margin: 0;
    list-style: none;
  }

  .aa-List, .aa-SourceHeader {
    padding: 0;
    position: relative;
  }

  .aa-SourceHeader {
    margin: 8px .5em 8px 0;
    margin: var(--aa-spacing-half) .5em var(--aa-spacing-half) 0;
  }

  .aa-SourceHeader:empty {
    display: none;
  }

  .aa-SourceHeaderTitle {
    background: #fff;
    background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
    color: rgba(var(--aa-primary-color-rgb), 1);
    font-size: .8em;
    font-weight: 600;
    font-weight: var(--aa-font-weight-semibold);
    padding: 0 8px 0 0;
    padding: 0 var(--aa-spacing-half) 0 0;
    z-index: 9999;
    z-index: var(--aa-base-z-index);
    margin: 0;
    display: inline-block;
    position: relative;
  }

  .aa-SourceHeaderLine {
    border-bottom: 1px solid #3e34d3;
    border-bottom: 1px solid rgba(var(--aa-primary-color-rgb), 1);
    opacity: .3;
    height: 2px;
    top: 8px;
    left: 0;
    right: 0;
    top: var(--aa-spacing-half);
    z-index: calc(9999 - 1);
    z-index: calc(var(--aa-base-z-index)  - 1);
    margin: 0;
    padding: 0;
    display: block;
    position: absolute;
  }

  .aa-SourceFooterSeeAll {
    background: linear-gradient(#fff, #807ea324);
    background: linear-gradient(180deg, rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha)), #807ea324);
    border: 1px solid #807ea399;
    border: 1px solid rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    color: inherit;
    font-size: .95em;
    font-weight: 500;
    font-weight: var(--aa-font-weight-medium);
    border-radius: 5px;
    padding: .475em 1em .6em;
    -webkit-text-decoration: none;
    text-decoration: none;
    box-shadow: inset 0 0 2px #fff, 0 2px 2px -1px #4c455826;
  }

  .aa-SourceFooterSeeAll:focus, .aa-SourceFooterSeeAll:hover {
    border: 1px solid #3e34d3;
    border: 1px solid rgba(var(--aa-primary-color-rgb), 1);
    color: rgba(var(--aa-primary-color-rgb), 1);
  }

  .aa-Item {
    cursor: pointer;
    min-height: 40px;
    min-height: calc(var(--aa-spacing) * 2.5);
    padding: 4px;
    padding: calc(var(--aa-spacing-half) / 2);
    border-radius: 3px;
    align-items: center;
    display: grid;
  }

  .aa-Item[aria-selected="true"] {
    background-color: #b3add634;
    background-color: rgba(var(--aa-selected-color-rgb), var(--aa-selected-color-alpha));
  }

  .aa-Item[aria-selected="true"] .aa-ActiveOnly, .aa-Item[aria-selected="true"] .aa-ItemActionButton {
    visibility: visible;
  }

  .aa-ItemIcon {
    background: #fff;
    background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
    box-shadow: inset 0 0 0 1px #807ea34d;
    box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
    color: rgba(var(--aa-icon-color-rgb), var(--aa-icon-color-alpha));
    height: 28px;
    height: calc(var(--aa-icon-size)  + var(--aa-spacing-half));
    stroke-width: 1.6px;
    stroke-width: var(--aa-icon-stroke-width);
    text-align: center;
    width: 28px;
    width: calc(var(--aa-icon-size)  + var(--aa-spacing-half));
    border-radius: 3px;
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    font-size: .7em;
    display: flex;
    overflow: hidden;
  }

  .aa-ItemIcon img {
    height: auto;
    max-height: 20px;
    max-height: calc(var(--aa-icon-size)  + var(--aa-spacing-half)  - 8px);
    max-width: 20px;
    max-width: calc(var(--aa-icon-size)  + var(--aa-spacing-half)  - 8px);
    width: auto;
  }

  .aa-ItemIcon svg {
    height: 20px;
    height: var(--aa-icon-size);
    width: 20px;
    width: var(--aa-icon-size);
  }

  .aa-ItemIcon--alignTop {
    align-self: flex-start;
  }

  .aa-ItemIcon--noBorder {
    box-shadow: none;
    background: none;
  }

  .aa-ItemIcon--picture {
    width: 96px;
    height: 96px;
  }

  .aa-ItemIcon--picture img {
    max-width: 100%;
    max-height: 100%;
    padding: 8px;
    padding: var(--aa-spacing-half);
  }

  .aa-ItemContent {
    cursor: pointer;
    grid-gap: calc((16 * 1 * 1px) / 2);
    grid-gap: calc(calc(16 * 1 * 1px) / 2);
    grid-gap: var(--aa-spacing-half);
    align-items: center;
    gap: 8px;
    gap: var(--aa-spacing-half);
    grid-auto-flow: column;
    line-height: 1.25em;
    display: grid;
    overflow: hidden;
  }

  .aa-ItemContent:empty {
    display: none;
  }

  .aa-ItemContent mark {
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
    font-style: normal;
    font-weight: 700;
    font-weight: var(--aa-font-weight-bold);
    background: none;
  }

  .aa-ItemContent--dual {
    text-align: left;
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }

  .aa-ItemContent--dual .aa-ItemContentSubtitle, .aa-ItemContent--dual .aa-ItemContentTitle {
    display: block;
  }

  .aa-ItemContent--indented {
    padding-left: 36px;
    padding-left: calc(var(--aa-icon-size)  + var(--aa-spacing));
  }

  .aa-ItemContentBody {
    grid-gap: calc(((16 * 1 * 1px) / 2) / 2);
    grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
    grid-gap: calc(var(--aa-spacing-half) / 2);
    gap: 4px;
    gap: calc(var(--aa-spacing-half) / 2);
    display: grid;
  }

  .aa-ItemContentTitle {
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    margin: 0 .5em 0 0;
    padding: 0;
    display: inline-block;
    overflow: hidden;
  }

  .aa-ItemContentSubtitle {
    font-size: .92em;
  }

  .aa-ItemContentSubtitleIcon:before {
    border-color: #807ea3a3;
    border-color: rgba(var(--aa-muted-color-rgb), .64);
    content: "";
    border-style: solid;
    display: inline-block;
    position: relative;
    top: -3px;
    left: 1px;
  }

  .aa-ItemContentSubtitle--inline .aa-ItemContentSubtitleIcon:before {
    margin-left: 8px;
    margin-left: var(--aa-spacing-half);
    margin-right: 4px;
    margin-right: calc(var(--aa-spacing-half) / 2);
    width: 10px;
    width: calc(var(--aa-spacing-half)  + 2px);
    border-width: 0 0 1.5px;
  }

  .aa-ItemContentSubtitle--standalone {
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
    grid-gap: calc((16 * 1 * 1px) / 2);
    grid-gap: calc(calc(16 * 1 * 1px) / 2);
    grid-gap: var(--aa-spacing-half);
    align-items: center;
    gap: 8px;
    gap: var(--aa-spacing-half);
    grid-auto-flow: column;
    justify-content: start;
    display: grid;
  }

  .aa-ItemContentSubtitle--standalone .aa-ItemContentSubtitleIcon:before {
    height: 8px;
    height: var(--aa-spacing-half);
    width: 8px;
    width: var(--aa-spacing-half);
    border-width: 0 0 1.5px 1.5px;
    border-radius: 0 0 0 3px;
  }

  .aa-ItemContentSubtitleCategory {
    color: rgba(var(--aa-muted-color-rgb), 1);
    font-weight: 500;
  }

  .aa-ItemContentDescription {
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
    text-overflow: ellipsis;
    max-width: 100%;
    font-size: .85em;
    overflow-x: hidden;
  }

  .aa-ItemContentDescription:empty {
    display: none;
  }

  .aa-ItemContentDescription mark {
    background: #f5df4d80;
    background: rgba(var(--aa-description-highlight-background-color-rgb), var(--aa-description-highlight-background-color-alpha));
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
    font-style: normal;
    font-weight: 500;
    font-weight: var(--aa-font-weight-medium);
  }

  .aa-ItemContentDash {
    color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    opacity: .4;
    display: none;
  }

  .aa-ItemContentTag {
    background-color: #3e34d333;
    background-color: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha));
    border-radius: 3px;
    margin: 0 .4em 0 0;
    padding: .08em .3em;
  }

  .aa-ItemLink, .aa-ItemWrapper {
    color: inherit;
    grid-gap: calc(((16 * 1 * 1px) / 2) / 2);
    grid-gap: calc(calc(calc(16 * 1 * 1px) / 2) / 2);
    grid-gap: calc(var(--aa-spacing-half) / 2);
    align-items: center;
    gap: 4px;
    gap: calc(var(--aa-spacing-half) / 2);
    grid-auto-flow: column;
    justify-content: space-between;
    width: 100%;
    display: grid;
  }

  .aa-ItemLink {
    color: inherit;
    -webkit-text-decoration: none;
    text-decoration: none;
  }

  .aa-ItemActions {
    height: 100%;
    margin: 0 -5.33333px;
    margin: 0 calc(var(--aa-spacing) / -3);
    grid-auto-flow: column;
    justify-self: end;
    padding: 0 2px 0 0;
    display: grid;
  }

  .aa-ItemActionButton {
    color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    cursor: pointer;
    background: none;
    border: 0;
    flex-shrink: 0;
    align-items: center;
    padding: 0;
    display: flex;
  }

  .aa-ItemActionButton:focus svg, .aa-ItemActionButton:hover svg {
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
  }

  @media (hover: none) and (pointer: coarse) {
    .aa-ItemActionButton:focus svg, .aa-ItemActionButton:hover svg {
      color: inherit;
    }
  }

  .aa-ItemActionButton svg {
    color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    margin: 5.33333px;
    margin: calc(var(--aa-spacing) / 3);
    stroke-width: 1.6px;
    stroke-width: var(--aa-icon-stroke-width);
    width: 20px;
    width: var(--aa-action-icon-size);
  }

  .aa-ActiveOnly {
    visibility: hidden;
  }

  .aa-PanelHeader {
    background: #3e34d3;
    background: rgba(var(--aa-primary-color-rgb), 1);
    color: #fff;
    height: var(--aa-modal-header-height);
    padding: 8px 16px;
    padding: var(--aa-spacing-half) var(--aa-spacing);
    align-items: center;
    margin: 0;
    display: grid;
    position: relative;
  }

  .aa-PanelHeader:after {
    background-image: linear-gradient(#fff, #fff0);
    background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0));
    bottom: -8px;
    bottom: calc(var(--aa-spacing-half) * -1);
    content: "";
    height: 8px;
    height: var(--aa-spacing-half);
    pointer-events: none;
    z-index: 9999;
    z-index: var(--aa-base-z-index);
    position: absolute;
    left: 0;
    right: 0;
  }

  .aa-PanelFooter {
    background-color: #fff;
    background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
    box-shadow: inset 0 1px #807ea34d;
    box-shadow: inset 0 1px 0 rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
    padding: 16px;
    padding: var(--aa-spacing);
    z-index: 9999;
    z-index: var(--aa-base-z-index);
    justify-content: space-between;
    margin: 0;
    display: flex;
    position: relative;
  }

  .aa-PanelFooter:after {
    background-image: linear-gradient(#fff0, #807ea399);
    background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha)));
    content: "";
    height: 16px;
    height: var(--aa-spacing);
    opacity: .12;
    pointer-events: none;
    top: -16px;
    left: 0;
    right: 0;
    top: calc(var(--aa-spacing) * -1);
    z-index: calc(9999 - 1);
    z-index: calc(var(--aa-base-z-index)  - 1);
    position: absolute;
  }

  .aa-DetachedContainer {
    background: #fff;
    background: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
    box-shadow: 0 0 0 1px #23263b1a, 0 6px 16px -4px #23263b26;
    box-shadow: var(--aa-panel-shadow);
    z-index: 9999;
    z-index: var(--aa-base-z-index);
    flex-direction: column;
    margin: 0;
    padding: 0;
    display: flex;
    position: fixed;
    inset: 0;
    overflow: hidden;
  }

  .aa-DetachedContainer:after {
    height: 32px;
  }

  .aa-DetachedContainer .aa-SourceHeader {
    margin: 8px 0 8px 2px;
    margin: var(--aa-spacing-half) 0 var(--aa-spacing-half) 2px;
  }

  .aa-DetachedContainer .aa-Panel {
    background-color: #fff;
    background-color: rgba(var(--aa-background-color-rgb), var(--aa-background-color-alpha));
    box-shadow: none;
    border-radius: 0;
    flex-grow: 1;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .aa-DetachedContainer .aa-PanelLayout {
    box-shadow: none;
    width: 100%;
    max-height: none;
    margin: 0;
    position: absolute;
    inset: 0;
    overflow-y: auto;
  }

  .aa-DetachedFormContainer {
    border-bottom: 1px solid #807ea34d;
    border-bottom: 1px solid rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
    padding: 8px;
    padding: var(--aa-spacing-half);
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    display: flex;
  }

  .aa-DetachedCancelButton {
    color: rgba(var(--aa-text-color-rgb), var(--aa-text-color-alpha));
    cursor: pointer;
    font: inherit;
    margin: 0 0 0 8px;
    margin: 0 0 0 var(--aa-spacing-half);
    padding: 0 8px;
    padding: 0 var(--aa-spacing-half);
    background: none;
    border: 0;
    border-radius: 3px;
  }

  .aa-DetachedCancelButton:focus, .aa-DetachedCancelButton:hover {
    box-shadow: inset 0 0 0 1px #807ea34d;
    box-shadow: inset 0 0 0 1px rgba(var(--aa-panel-border-color-rgb), var(--aa-panel-border-color-alpha));
  }

  .aa-DetachedContainer--modal {
    bottom: inherit;
    max-width: 680px;
    height: auto;
    max-width: var(--aa-detached-modal-max-width);
    border-radius: 6px;
    margin: 0 auto;
    position: absolute;
    top: 3%;
  }

  .aa-DetachedContainer--modal .aa-PanelLayout {
    max-height: 500px;
    max-height: var(--aa-detached-modal-max-height);
    padding-bottom: 8px;
    padding-bottom: var(--aa-spacing-half);
    position: static;
  }

  .aa-DetachedContainer--modal .aa-PanelLayout:empty {
    display: none;
  }

  .aa-DetachedSearchButton {
    background-color: #fff;
    background-color: rgba(var(--aa-input-background-color-rgb), var(--aa-input-background-color-alpha));
    border: 1px solid #807ea3cc;
    border: 1px solid rgba(var(--aa-input-border-color-rgb), var(--aa-input-border-color-alpha));
    color: rgba(var(--aa-muted-color-rgb), var(--aa-muted-color-alpha));
    cursor: pointer;
    font: inherit;
    font-family: inherit;
    font-family: var(--aa-font-family);
    font-size: 16px;
    font-size: var(--aa-font-size);
    height: 44px;
    height: var(--aa-search-input-height);
    padding: 0 5.5px;
    padding: 0 calc(var(--aa-search-input-height) / 8);
    text-align: left;
    border-radius: 3px;
    align-items: center;
    width: 100%;
    margin: 0;
    display: flex;
    position: relative;
  }

  .aa-DetachedSearchButton:focus {
    border-color: #3e34d3;
    border-color: rgba(var(--aa-primary-color-rgb), 1);
    box-shadow: 0 0 0 3px #3e34d333, inset 0 0 0 2px #3e34d333;
    box-shadow: rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 3px, inset rgba(var(--aa-primary-color-rgb), var(--aa-primary-color-alpha)) 0 0 0 2px;
    outline: none;
  }

  .aa-DetachedSearchButtonIcon {
    color: rgba(var(--aa-primary-color-rgb), 1);
    cursor: auto;
    width: 36px;
    height: 100%;
    width: calc(var(--aa-icon-size)  + var(--aa-spacing));
    flex-shrink: 0;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .aa-DetachedSearchButtonQuery {
    color: rgba(var(--aa-text-color-rgb), 1);
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.25em;
    overflow: hidden;
  }

  .aa-DetachedSearchButtonPlaceholder[hidden] {
    display: none;
  }

  .aa-Detached {
    height: 100vh;
    overflow: hidden;
  }

  .aa-DetachedOverlay {
    background-color: #73728166;
    background-color: rgba(var(--aa-overlay-color-rgb), var(--aa-overlay-color-alpha));
    height: 100vh;
    z-index: calc(9999 - 1);
    z-index: calc(var(--aa-base-z-index)  - 1);
    margin: 0;
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .aa-GradientBottom, .aa-GradientTop {
    height: 8px;
    height: var(--aa-spacing-half);
    pointer-events: none;
    z-index: 9999;
    z-index: var(--aa-base-z-index);
    position: absolute;
    left: 0;
    right: 0;
  }

  .aa-GradientTop {
    background-image: linear-gradient(#fff, #fff0);
    background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 1), rgba(var(--aa-background-color-rgb), 0));
    top: 0;
  }

  .aa-GradientBottom {
    background-image: linear-gradient(#fff0, #fff);
    background-image: linear-gradient(rgba(var(--aa-background-color-rgb), 0), rgba(var(--aa-background-color-rgb), 1));
    border-bottom-left-radius: 4px;
    border-bottom-left-radius: calc(var(--aa-spacing) / 4);
    border-bottom-right-radius: 4px;
    border-bottom-right-radius: calc(var(--aa-spacing) / 4);
    bottom: 0;
  }

  @media (hover: none) and (pointer: coarse) {
    .aa-DesktopOnly {
      display: none;
    }
  }

  @media (hover: hover) {
    .aa-TouchOnly {
      display: none;
    }
  }

  .aa-Autocomplete {
    border-image: var(--frame-border-image);
    border-image-outset: 5px;
    border-radius: 0;
    flex-grow: 1;
  }

  .aa-SourceNoResults {
    padding-bottom: 0 !important;
  }

  .aa-Form {
    background-color: var(--input-bg-color) !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
  }

  .aa-DetachedSearchButton {
    background: none;
    margin: 0;
    padding: 0;
  }

  .aa-DetachedSearchButton .aa-DetachedSearchButtonQuery {
    display: none;
  }

  .aa-SubmitButton {
    background-image: url("/assets/svg/search.svg") !important;
    background-size: var(--step--1) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }

  .aa-DetachedSearchButtonIcon {
    align-items: center;
    column-gap: var(--space-2xs);
    color: var(--text-primary);
    display: inline-flex;
  }

  .aa-DetachedSearchButtonIcon:before {
    content: "";
    width: var(--step--1);
    height: var(--step--1);
    background-color: var(--text-primary);
    flex-shrink: 0;
    mask: url("/assets/svg/search.svg") center / contain no-repeat;
  }

  .aa-DetachedSearchButtonIcon:hover {
    color: var(--brand-red);
    cursor: pointer;
  }

  .aa-DetachedSearchButtonIcon:hover:before {
    background-color: var(--brand-red);
  }

  .aa-Autocomplete:has(.aa-DetachedSearchButton) {
    background-color: #0000;
    border-image: ;
    flex-grow: 0;
    width: min-content;
  }

  .aa-SubmitIcon {
    display: none !important;
  }

  .aa-Form:focus-within {
    box-shadow: none !important;
    border: none !important;
  }

  .aa-Input {
    color: var(--text-primary) !important;
    font: var(--font-p) !important;
    outline: none !important;
    font-size: 16px !important;
  }

  .aa-Input:hover:not(:disabled):not(:focus) {
    box-shadow: none;
  }

  .aa-Input::placeholder {
    font-size: var(--step--1) !important;
    color: var(--text-placeholder) !important;
  }

  .aa-Input:focus {
    outline: none !important;
  }

  .aa-DetachedSearchButtonPlaceholder {
    display: none;
  }

  .aa-Panel {
    border: none !important;
    border-image: var(--card-border) !important;
    margin-top: var(--space-xs) !important;
    border-radius: 0 !important;
  }

  .aa-GradientBottom {
    display: none !important;
  }

  .aa-ItemLink {
    padding: var(--space-2xs) !important;
  }

  .aa-ItemLink:has(.aa-ItemContent--category) {
    padding: var(--space-3xs) !important;
  }

  .aa-Item:has(.aa-ItemContent--category) {
    margin-bottom: 0 !important;
    padding: 0 !important;
  }

  .aa-Item:has(.aa-ItemContent--category) + .aa-Item:has(.aa-ItemContent--category) {
    margin-top: 0 !important;
  }

  .aa-SourceHeader {
    text-transform: lowercase;
    margin-top: 0;
    font-family: var(--font-sc) !important;
    font-size: var(--step-0) !important;
    color: var(--text-secondary) !important;
  }

  .aa-Source:has(.aa-Item) + .aa-Source .aa-SourceHeader {
    margin-top: var(--space-s) !important;
  }

  .aa-ItemContentTitle {
    font-family: var(--font-p) !important;
    font-weight: normal !important;
    font-size: var(--step--1) !important;
  }

  .aa-ItemImage {
    aspect-ratio: 1;
    object-fit: cover;
    width: 100px;
    height: 100px;
    margin: 5px var(--space-s) 5px 5px;
    border-image: url("/assets/svg/frame.svg") 27 / 20px;
  }

  @media (max-width: 600px) {
    .aa-ItemImage {
      width: 80px;
      height: 80px;
      margin-right: var(--space-2xs);
    }
  }

  .aa-ItemCategories {
    font-size: var(--step--2);
    margin-top: var(--space-3xs);
    align-items: center;
    display: flex;
  }

  .aa-ItemCategories .ms-breadcrumbs ol > li > * {
    color: var(--text-primary);
  }

  .aa-ItemContent--category .aa-ItemCategories {
    font-size: var(--step--1);
  }

  @media (max-width: 600px) {
    .aa-ItemContent--category .aa-ItemCategories .ms-breadcrumbs ol {
      font-size: var(--step--1);
    }
  }

  .aa-ItemContentSubtitle {
    color: var(--text-secondary);
    font-size: var(--step--2);
  }

  .aa-ItemSubtitle {
    font-family: var(--font-p);
    color: var(--text-secondary);
    font-size: var(--step--2);
  }

  .aa-PanelLayout:empty {
    display: none !important;
  }
}

@layer layouts {
  @media (min-width: 768px) {
    .ms-battle-background {
      background-blend-mode: lighten;
      background-color: #fff9;
      background-image: url("/assets/images/battle.webp");
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-attachment: fixed;
    }
  }
}

@layer pages {
  #about-page main {
    justify-items: center;
  }

  #account-page > * + * {
    margin-top: var(--space-s);
  }

  #account-page > main > header {
    column-gap: var(--space-s);
    flex-flow: wrap;
    display: flex;
  }

  #account-page > main > header + * {
    margin-top: var(--space-s);
  }

  #account-page > main > header .actions {
    gap: var(--space-s);
    flex-direction: row;
    align-items: center;
    margin-left: auto;
    display: flex;
  }

  #account-page .seller-onboarding-banner {
    align-items: center;
    column-gap: var(--space-s);
    flex-wrap: wrap;
    margin-top: 0;
  }

  #account-page .seller-onboarding-banner a {
    margin-left: auto;
  }

  #account-page .tenure {
    margin-left: var(--space-3xs);
    font-size: var(--step--1);
  }

  #product-page {
    column-gap: var(--space-s);
    row-gap: var(--space-m);
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "images product"
                         "listings listings"
                         "related related";
    display: grid;
  }

  @media (max-width: 1024px) {
    #product-page {
      grid-template-columns: 1fr;
      grid-template-areas: "images"
                           "product"
                           "listings"
                           "related";
    }
  }

  @media (max-width: 768px) {
    #product-page #image-carousel.no-images {
      display: none;
    }

    #product-page:has(#image-carousel.no-images) {
      grid-template-areas: "product"
                           "listings"
                           "related";
    }
  }

  #product-page #image-carousel {
    grid-area: images;
  }

  @media (min-width: 768px) {
    #product-page #image-carousel .ms-image-carousel {
      top: var(--space-xs);
      position: sticky;
    }
  }

  #product-page #image-carousel > .disclaimer {
    font-size: var(--step--2);
    color: var(--text-secondary);
    display: block;
  }

  #product-page .product-info {
    row-gap: var(--space-s-m);
    flex-direction: column;
    grid-area: product;
    align-self: flex-start;
    display: flex;
  }

  #product-page .product-info .product-info--name {
    margin-top: var(--space-2xs);
    font-family: var(--font-p);
  }

  #product-page .product-info .product-info--error {
    color: var(--text-secondary);
    flex-direction: row;
    justify-content: space-between;
    margin-top: auto;
    display: flex;
  }

  #product-page .product-info .product-info--error > p {
    font-size: var(--step--1);
  }

  #product-page .ms-listings {
    grid-area: listings;
    margin-top: 0 !important;
  }

  #product-page .related-products {
    padding-top: var(--space-m);
    margin-inline: var(--space-xs);
    grid-area: related;
  }

  #product-page .related-products--list {
    padding-top: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    margin-top: 0;
    padding-left: 0;
    list-style-type: none;
    display: grid;
  }

  @media (max-width: 600px) {
    #product-page .related-products--list {
      grid-template-columns: 1fr;
    }
  }

  #product-page .related-products--list {
    grid-gap: var(--space-xs);
  }

  #product-page .related-products--list > li {
    padding: 0;
    list-style: none;
  }

  #category-page {
    grid-template-columns: subgrid;
    display: grid;
  }

  #category-page > * {
    grid-column: content;
  }

  #category-page .category-header {
    column-gap: var(--space-s);
    flex-direction: column;
    justify-content: space-between;
    display: flex;
  }

  @media (max-width: 768px) {
    #category-page .category-header {
      margin-inline: var(--space-2xs);
    }
  }

  #category-page .category-header .category-kind {
    font-size: var(--step--1);
    color: var(--text-secondary);
    font-style: italic;
  }

  #category-page .category-header > .category-header--links {
    align-self: flex-end;
    gap: clamp(var(--space-s), var(--space-m), var(--space-l));
    flex-direction: row;
    display: flex;
  }

  @media (max-width: 768px) {
    #category-page .category-header > .category-header--links {
      padding-top: var(--space-xs);
    }
  }

  #category-page #products {
    align-self: start;
  }

  #category-page .product-type-label {
    font-size: var(--step--1);
  }

  #category-page .range-sep {
    flex-grow: 0;
    align-self: center;
    font-style: italic;
  }

  #category-page .products-section {
    --sidebar-width: 300px;
    margin-top: var(--space-s);
    grid-template-columns: var(--sidebar-width) auto;
    column-gap: var(--space-s);
    flex: 1;
    width: 100%;
    min-width: 300px;
    transition: grid-template-columns .2s ease-in-out;
    display: grid;
    overflow: clip;
  }

  @media (max-width: 1000px) {
    #category-page .products-section {
      grid-column: full;
    }
  }

  #category-page .products-section .products-section--header h1 {
    font-size: var(--step-1);
    font-family: var(--font-p);
  }

  @media (min-width: 768px) {
    #category-page .products-section .products-section--header {
      flex-wrap: wrap;
      justify-content: space-between;
      align-self: flex-start;
      align-items: flex-end;
      display: flex;
    }
  }

  @media (max-width: 768px) {
    #category-page .products-section .products-section--header {
      top: calc(var(--step-2) * -1);
      z-index: 2;
      background-color: var(--card-bg-color);
      padding-bottom: var(--space-2xs);
      position: sticky;
    }

    #category-page .products-section .products-section--header.is-stuck {
      margin-inline: calc(var(--space-s) * -1);
    }

    #category-page .products-section .products-section--header.is-stuck:after {
      transition: opacity .3s;
    }

    @starting-style {
      #category-page .products-section .products-section--header.is-stuck:after {
        opacity: 0;
      }
    }

    #category-page .products-section .products-section--header.is-stuck:after {
      content: "";
      background: url("/assets/svg/line.svg") bottom repeat-x;
      width: 100%;
      height: 2px;
      position: absolute;
      bottom: 0;
    }
  }

  #category-page .products-section .products-section--list {
    margin-top: var(--space-m);
    column-gap: var(--space-xs);
    row-gap: var(--space-s-m);
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    display: grid;
  }

  #category-page .products-section .products-section--list > li {
    padding: 0;
    list-style: none;
  }

  #category-page .overlay {
    pointer-events: none;
    display: none;
  }

  @media (max-width: 768px) {
    #category-page .ms-filters-sidebar {
      background-color: var(--card-bg-color);
      z-index: 1000;
      height: 100%;
      padding: var(--space-xs);
      transition: transform .3s;
      position: fixed;
      top: 0;
      left: 0;
      overflow-y: auto;
      transform: translateX(-100%);
      box-shadow: 2px 0 5px #0000004d;
    }

    #category-page .overlay {
      transition: opacity .3s;
    }

    @starting-style {
      #category-page .overlay {
        opacity: 0;
      }
    }

    #category-page .overlay {
      z-index: 900;
      cursor: pointer;
      pointer-events: auto;
      background: #00000080;
      display: none;
      position: fixed;
      inset: 0;
    }

    #category-page :not(#filter-toggle-input:checked) ~ .products-section {
      grid-template-columns: 1fr;
    }

    #category-page #filter-toggle-input:checked ~ .products-section {
      --sidebar-width: 300px;
      grid-template-columns: 1fr;
    }

    #category-page #filter-toggle-input:checked ~ .products-section .ms-filters-sidebar {
      transform: translateX(0);
    }

    #category-page #filter-toggle-input:checked + .overlay {
      display: block;
    }
  }

  #category-page .no-results {
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  #category-page nav.ms-pagination {
    margin-top: var(--space-xl);
  }

  #cart-page {
    gap: var(--space-m);
    grid-template-columns: 2fr 1fr;
    display: grid;
  }

  #cart-page .cart {
    align-self: flex-start;
  }

  #cart-page .cart h1 {
    font-family: var(--font-p);
  }

  #cart-page .cart .cart-header-info {
    align-items: baseline;
    gap: var(--space-m);
    margin-top: 0;
    display: flex;
  }

  #cart-page .cart .cart-header-info small {
    flex: 1;
  }

  #cart-page .cart ol {
    max-width: 100%;
    list-style-type: none;
  }

  #cart-page .cart ol li {
    padding-left: 0;
    list-style: none;
  }

  #cart-page .cart ol li:after {
    content: "";
    background: url("/assets/svg/line.svg") center / contain repeat-x;
    width: 100%;
    height: 3px;
    margin-top: 3px;
    display: block;
  }

  #cart-page .cart ol li:last-child:after {
    content: none;
  }

  #cart-page .sellers {
    margin-top: var(--space-m);
  }

  #cart-page .seller-item-group .seller-item-group--header {
    align-items: baseline;
    column-gap: var(--space-xs);
    flex-direction: row;
    display: flex;
  }

  #cart-page .seller-item-group .seller-item-group--items {
    padding-left: var(--space-xs);
  }

  #cart-page .cart-item-row {
    gap: var(--space-s);
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  #cart-page .cart-item {
    gap: var(--space-s);
    width: 100%;
    padding: var(--space-xs) 0 var(--space-s) 0;
    flex-direction: row;
    display: flex;
  }

  #cart-page .cart-item.unavailable {
    opacity: .6;
  }

  #cart-page .cart-item.unavailable .cart-item--details--header h3 > a {
    text-decoration: line-through;
  }

  #cart-page .cart-item > .cart-item--image {
    aspect-ratio: 1;
    object-fit: cover;
    border-image: url("/assets/svg/frame.svg") 27 / 20px;
    width: 75px;
    height: 75px;
    padding: 2px;
  }

  #cart-page .cart-item > .cart-item--details {
    gap: var(--space-2xs);
    flex-direction: column;
    width: 100%;
    display: flex;
  }

  #cart-page .cart-item > .cart-item--details > .cart-item--details--header {
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
    width: 100%;
    display: flex;
  }

  #cart-page .cart-item > .cart-item--details > .cart-item--details--header h3 > a {
    font-family: var(--font-p);
  }

  #cart-page .cart-item > .cart-item--details .cart-item--quantity {
    margin-top: var(--space-xs);
    color: var(--text-secondary);
    flex-flow: wrap;
    align-items: center;
    display: flex;
  }

  #cart-page .cart-item > .cart-item--details .cart-item--quantity.has-warning select {
    border-color: var(--ms-error);
    color: var(--ms-error);
  }

  #cart-page .cart-item > .cart-item--details .cart-item--quantity > label > input[name="quantity"] {
    width: 5ch;
  }

  #cart-page .cart-item > .cart-item--details .cart-item--quantity > label > .quantity--available {
    font-family: var(--font-sc);
    font-size: var(--step--1);
  }

  #cart-page .cart-item > .cart-item--details .cart-item--seller {
    font-size: var(--step--1);
  }

  #cart-page .cart-item > .cart-item--details .cart-item--price {
    align-items: baseline;
    gap: var(--space-2xs);
    flex-direction: row;
    display: flex;
  }

  #cart-page .cart-item > .cart-item--details .cart-item--price .cart-item--price-base {
    font-size: var(--step-0);
    font-weight: bold;
  }

  #cart-page .cart-item > .cart-item--details .cart-item--price .cart-item--price-local {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #cart-page .cart-summary {
    top: var(--space-m);
    align-self: start;
    gap: var(--space-s);
    flex-direction: column;
    display: flex;
    position: sticky;
  }

  #cart-page .cart-summary .cart-summary--count {
    font-family: var(--font-sc);
  }

  #cart-page .cart-summary .cart-summary--note {
    margin-top: var(--space-2xs);
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #cart-page .cart-summary .cart-summary--btn-row {
    margin-top: var(--space-s);
  }

  #cart-page .cart-summary .cart-summary--btn-row button {
    width: 100%;
  }

  #cart-page .cart-summary #subtotal {
    font-size: var(--step-1);
    font-weight: bold;
  }

  #cart-page .cart-summary #errors:not(:empty) {
    margin-top: var(--space-s);
    display: block;
  }

  #cart-page .no-results {
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 900px) {
    #cart-page {
      flex-direction: column;
      row-gap: 0;
      min-height: 100vh;
      display: flex;
      position: relative;
    }

    #cart-page .cart-summary {
      gap: var(--space-2xs);
      padding: var(--space-m);
      padding-top: var(--space-s);
      margin-top: 0;
      transition: box-shadow .2s;
      position: relative;
    }
  }

  #checkout-page {
    gap: var(--space-m);
    grid-template-columns: 2fr 1fr;
    display: grid;
  }

  @media (max-width: 768px) {
    #checkout-page {
      grid-template-columns: 1fr;
    }
  }

  #checkout-page .checkout-container {
    gap: var(--space-m);
    flex-direction: column;
    display: flex;
  }

  #checkout-page #delivery-form {
    min-height: 100px;
  }

  #checkout-page #delivery-form h2 {
    margin-bottom: var(--space-xs);
  }

  #checkout-page #delivery-form .ms-card {
    padding: var(--space-s);
  }

  #checkout-page #delivery-form .address-btn-row {
    margin-top: var(--space-m);
    justify-content: flex-end;
    align-items: baseline;
    gap: var(--space-s);
    flex-direction: row;
    display: flex;
  }

  #checkout-page #delivery-form #address-messages {
    padding-top: var(--space-s);
    padding-left: var(--space-xs);
  }

  #checkout-page #delivery-form #address-messages:not(:empty):before {
    content: "Failed to calculate shipping: ";
  }

  #checkout-page #payment > h2 {
    margin-bottom: var(--space-xs);
  }

  #checkout-page #payment > #payment-element {
    min-height: 80px;
    padding: 5px;
  }

  #checkout-page #shipping ul, #checkout-page #shipping ol {
    max-width: 100%;
    padding-left: 0;
    list-style-type: none;
  }

  :is(#checkout-page #shipping ul, #checkout-page #shipping ol) li {
    padding-left: 0;
    list-style: none;
  }

  #checkout-page #shipping .sellers {
    margin-top: var(--space-s);
  }

  #checkout-page #shipping .sellers .seller--name {
    font-style: normal;
    font-size: var(--step-0);
  }

  #checkout-page #shipping .sellers .parcels {
    margin-top: var(--space-xs);
  }

  #checkout-page #shipping .sellers .parcels .parcel {
    flex-direction: column;
    display: flex;
  }

  #checkout-page #shipping .sellers .parcels .parcel:not(:first-child) {
    margin-top: var(--space-m);
  }

  #checkout-page #shipping .sellers .parcels .parcel {
    row-gap: var(--space-s);
  }

  #checkout-page #shipping .sellers .parcels .parcel .items > .item {
    column-gap: var(--space-s);
    flex-direction: row;
    display: flex;
  }

  @media (max-width: 768px) {
    #checkout-page #shipping .sellers .parcels .parcel .items > .item {
      column-gap: var(--space-xs);
    }
  }

  #checkout-page #shipping .sellers .parcels .parcel .items > .item > .image {
    aspect-ratio: 1;
    object-fit: contain;
    border-image: url("/assets/svg/frame.svg") 27 / 20px;
    width: 150px;
    height: 150px;
    padding: 5px;
  }

  @media (max-width: 900px) {
    #checkout-page #shipping .sellers .parcels .parcel .items > .item > .image {
      object-fit: contain;
      width: 100px;
      height: 100px;
    }
  }

  #checkout-page #shipping .sellers .parcels .parcel .items > .item > .details {
    row-gap: var(--space-2xs);
    padding-top: var(--space-2xs);
    flex-direction: column;
    display: flex;
  }

  #checkout-page #shipping .sellers .parcels .parcel .items > .item > .details > .name {
    font-family: var(--font-p);
    font-size: var(--step--1);
  }

  #checkout-page #shipping .sellers .parcels .parcel .items > .item > .details > .price {
    font-size: var(--step--1);
    font-weight: bold;
  }

  #checkout-page #shipping .sellers .parcels .parcel .single-rate {
    margin-top: var(--space-xs);
    row-gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #checkout-page #shipping .sellers .parcels .parcel .single-rate .price {
    font-size: var(--step-0);
    font-weight: bold;
  }

  #checkout-page #shipping .sellers .parcels .parcel .single-rate .service-level {
    font-size: var(--step--1);
    font-family: var(--font-sc);
  }

  #checkout-page #shipping .sellers .parcels .parcel .single-rate .duration {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #checkout-page #shipping .sellers .parcels > li:after {
    content: "";
    margin-top: var(--space-m);
    background: url("/assets/svg/line.svg") center / contain repeat-x;
    height: 3px;
    display: block;
  }

  #checkout-page #shipping .sellers .parcels > li:last-child:after {
    content: none;
  }

  #checkout-page .checkout-summary {
    top: var(--space-m);
    align-self: start;
    position: sticky;
  }

  #checkout-page .checkout-summary .checkout-summary--note {
    margin-top: var(--space-xs);
    font-size: var(--step--2);
    color: var(--text-secondary);
    display: block;
  }

  #checkout-page .checkout-summary .checkout-summary--breakdown {
    margin-top: var(--space-s);
    font-size: var(--step--1);
  }

  #checkout-page .checkout-summary .checkout-summary--breakdown li span:first-child:after {
    bottom: calc((var(--step-0) / 2)  - 5px);
  }

  #checkout-page .checkout-summary .checkout-summary--total {
    margin-top: var(--space-m);
    font-size: var(--step-1);
    flex-direction: row;
    justify-content: space-between;
    font-weight: bold;
    display: flex;
  }

  #checkout-page .checkout-summary #buy-btn {
    width: 100%;
  }

  #item-page {
    column-gap: var(--space-s);
    row-gap: var(--space-s);
    grid-template-columns: 1fr .75fr;
    grid-template-areas: "images listing"
                         "images product"
                         "related related";
    display: grid;
  }

  @media (max-width: 900px) {
    #item-page {
      grid-template-columns: 1fr;
      grid-template-areas: "images"
                           "listing"
                           "product"
                           "related";
    }
  }

  #item-page > main {
    padding: var(--space-m);
    row-gap: var(--space-s-m);
    flex-direction: column;
    grid-area: listing;
    align-self: flex-start;
    min-width: min(90dvw, 500px);
    max-width: 960px;
    display: flex;
  }

  #item-page .item-header {
    gap: var(--space-2xs);
    flex-direction: column;
    display: flex;
  }

  #item-page .item-header h1 {
    font-family: var(--font-p);
  }

  #item-page .price {
    gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #item-page .price .price--primary {
    font-weight: bold;
    font-size: var(--step-1);
  }

  #item-page .price .shipping-calculation {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #item-page .sold {
    color: var(--brand-red);
  }

  #item-page .ms-reputation {
    grid-area: reputation;
  }

  #item-page .add-to-cart {
    column-gap: var(--space-s);
    row-gap: var(--space-xs);
    flex-flow: wrap;
    align-items: center;
    display: flex;
  }

  #item-page .add-to-cart > .quantity {
    flex-direction: row;
    align-items: center;
  }

  #item-page .add-to-cart > .quantity > input {
    min-width: 60px;
  }

  #item-page .add-to-cart > .quantity > .quantity--available {
    font-family: var(--font-p);
    color: var(--text-secondary);
    font-size: var(--step--1);
  }

  #item-page .add-to-cart dl {
    justify-content: space-between;
  }

  #item-page .add-to-cart .delivery-estimate {
    color: var(--text-secondary);
    font-size: var(--step--1);
  }

  #item-page .shipping-cost {
    color: var(--text-primary);
    font-weight: bold;
  }

  #item-page .zip-button {
    font-weight: bold;
  }

  #item-page .zip-button :not(:hover) {
    color: var(--text-primary);
  }

  #item-page #product-info h3 {
    font-size: var(--step-1);
    font-family: var(--font-sc);
    margin-bottom: var(--space-s);
  }

  #item-page #product-info .product-details {
    gap: var(--space-m);
    flex-direction: row;
    display: flex;
  }

  #item-page #product-info .product-details > :first-child {
    flex-grow: 1;
  }

  #item-page #product-info .product-details > :first-child ul {
    margin-bottom: var(--space-m);
  }

  #item-page #product-info .product-details > :first-child .actions {
    margin-top: var(--space-xs);
    gap: var(--space-s);
  }

  #item-page #product-info .product-image-container {
    max-width: 175px;
  }

  @media (max-width: 600px) {
    #item-page #product-info .product-image-container {
      max-width: 120px;
    }
  }

  #item-page #product-info .product-image-container .product-image {
    object-fit: contain;
  }

  #item-page .seller-disabled {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #item-page #shipping-zip {
    width: 8ch;
  }

  #item-page .protection-badge {
    gap: var(--space-xs);
    padding: var(--space-xs);
    background-color: #fff;
    border-image: url("/assets/svg/frame-2.svg") 27 / 12px;
    flex-direction: row;
    align-items: center;
    display: flex;
  }

  #item-page .protection-badge img {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
  }

  #item-page .protection-badge .protection-badge--text {
    gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #item-page .protection-badge .protection-badge--text strong {
    font-size: var(--step--1);
    font-weight: 600;
  }

  #item-page .protection-badge .protection-badge--text span {
    font-size: var(--step--2);
    color: var(--text-secondary);
  }

  #item-page .seller {
    margin-top: auto;
  }

  #item-page .seller .seller--details {
    gap: var(--space-xs);
    padding-top: var(--space-s);
    background: url("/assets/svg/line.svg") top / auto 3px repeat-x;
    flex-direction: row;
    align-items: flex-start;
    margin-top: auto;
    display: flex;
  }

  #item-page .seller .seller--info {
    flex: 1;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #item-page .seller .lgs-partner-badge {
    gap: var(--space-2xs);
    padding: var(--space-3xs) var(--space-2xs);
    white-space: nowrap;
    background-color: #fff;
    border-image: url("/assets/svg/frame-2.svg") 10 / 20px;
    flex-direction: row;
    display: flex;
  }

  #item-page .seller .lgs-partner-badge img {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

  #item-page .seller .lgs-partner-badge span {
    font-size: var(--step--2);
    font-weight: 500;
  }

  #item-page .seller .seller--shipping-banner {
    margin-top: var(--space-s);
    text-align: center;
    width: 100%;
    font-size: var(--step--1);
  }

  #item-page .seller .seller--info--main {
    gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #item-page .seller .seller--info--main .sold-by {
    font-size: var(--step--2);
    color: var(--text-secondary);
    display: inline;
  }

  #item-page .seller .ships-from {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #item-page .seller-stats {
    gap: var(--space-xs);
    color: var(--text-secondary);
    flex-direction: row;
    display: flex;
  }

  #item-page .seller-stats > p {
    font-size: var(--step--1);
    white-space: nowrap;
  }

  #item-page .carousel-container {
    grid-area: images;
  }

  #item-page .units .figure-table tbody tr:last-child td {
    background-image: none;
  }

  #item-page .units .figure-table td:first-child, #item-page .units .figure-table th:first-child {
    white-space: nowrap;
    width: 1%;
    font-size: var(--step-0);
    position: relative;
    top: -3px;
  }

  #item-page .units .figure-table .unit-link {
    font-family: var(--font-p);
  }

  #item-page .ms-image-carousel {
    top: var(--space-xs);
    position: sticky;
  }

  #item-page .related-products, #item-page .related-items-container {
    padding-top: var(--space-m);
    margin-inline: var(--space-xs);
    grid-area: related;
  }

  #item-page .related-products--list {
    padding-top: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    margin-top: 0;
    padding-left: 0;
    list-style-type: none;
    display: grid;
  }

  @media (max-width: 600px) {
    #item-page .related-products--list {
      grid-template-columns: 1fr;
    }
  }

  #item-page .related-products--list {
    grid-gap: var(--space-xs);
  }

  #item-page .related-products--list > li {
    padding: 0;
    list-style: none;
  }

  #new-seller-page form[name="become-seller-form"] > * {
    margin-top: var(--space-m);
  }

  #new-seller-page .submit-btn {
    margin-left: auto;
  }

  #new-seller-page fieldset {
    border-image-width: 10px;
  }

  #new-seller-page #address-container {
    border-image-width: 5px;
    min-height: 300px;
  }

  #new-seller-page #form-error {
    margin-top: var(--space-s);
    display: block;
  }

  #seller-register-page main {
    max-width: 700px;
    margin: var(--space-l) auto;
  }

  @media (max-width: 768px) {
    #seller-register-page main {
      margin: var(--space-s) auto;
    }
  }

  #seller-register-page main > form fieldset {
    margin-top: var(--space-s);
  }

  #seller-register-page main > form .form-actions {
    margin-top: var(--space-s);
    justify-content: space-between;
    align-items: center;
    gap: var(--space-m);
    display: flex;
  }

  #seller-register-page main > form .form-actions .ms-btn {
    flex: none;
  }

  #seller-register-page main > form .form-actions .ms-btn-cta {
    margin-left: auto;
  }

  #seller-register-page #address-element {
    min-height: 300px;
  }

  #seller-onboarding-page .later {
    margin-bottom: var(--space-2xs);
    justify-self: flex-end;
  }

  #sign-in-page {
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  #sign-in-page main {
    flex-direction: column;
    flex-grow: 1;
    max-width: 500px;
  }

  #sign-in-page form {
    margin-top: var(--space-m);
    row-gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  #sign-in-page form > label {
    row-gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #sign-in-page .ms-btn-google {
    margin-top: var(--space-s);
  }

  #sign-in-page .password {
    row-gap: var(--space-2xs);
    flex-direction: column;
    display: flex;
  }

  #sign-in-page .password > .forgot-password {
    text-align: end;
    font-size: var(--step--1);
    font-family: var(--font-p);
  }

  #sign-in-page .sign-in {
    margin-top: var(--space-s);
  }

  #sign-up-page {
    padding-top: var(--space-m);
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  @media (max-width: 500px) {
    #sign-up-page {
      padding-top: 0;
    }
  }

  #sign-up-page main {
    flex-direction: column;
    flex-grow: 1;
    max-width: 650px;
    display: flex;
  }

  #sign-up-page form {
    margin-top: var(--space-m);
    row-gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  #sign-up-page .ms-btn-google {
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
  }

  #new-item-page main {
    max-width: var(--content-max-width);
  }

  #new-item-page .new-item-form > .footer {
    margin-top: var(--space-m);
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-s);
    flex-flow: wrap;
    display: flex;
  }

  #new-item-page .new-item-form > .footer .ms-btn-cta {
    min-width: 170px;
  }

  #edit-items-page main header {
    margin-top: var(--space-xs);
  }

  #edit-items-page main header + * {
    margin-top: var(--space-s);
  }

  #edit-items-page #item-list {
    max-width: 100%;
    list-style-type: none;
  }

  #edit-items-page #item-list > li {
    padding-left: 0;
    list-style: none;
  }

  #edit-items-page #item-list > li:not(:first-child) {
    margin-top: var(--space-s);
  }

  #edit-items-page .edit-items-form {
    width: 100%;
  }

  #edit-items-page .edit-items-form > .footer {
    margin-top: var(--space-m);
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    flex-flow: wrap;
    display: flex;
  }

  #orders-page > * + * {
    margin-top: var(--space-s);
  }

  #orders-page main header {
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #orders-page main .orders-list {
    padding-left: 0;
    list-style-type: none;
  }

  #orders-page .order-list {
    gap: var(--space-m);
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
  }

  #orders-page .order-item {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
  }

  #orders-page .order-header {
    padding: var(--space-s);
    border-bottom: 1px solid var(--border-color);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #orders-page .order-header--left {
    gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #orders-page .order-meta {
    gap: var(--space-2xs);
    font-size: var(--step--1);
    color: var(--text-secondary);
    display: flex;
  }

  #orders-page .separator {
    color: var(--text-tertiary);
  }

  #orders-page .order-details {
    padding: var(--space-s);
  }

  #orders-page .order-seller {
    padding: var(--space-s) 0;
    border-bottom: 1px solid var(--border-color);
  }

  #orders-page .order-seller:last-child {
    border-bottom: none;
  }

  #orders-page .order-seller--header {
    margin-bottom: var(--space-xs);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #orders-page .order-seller--meta {
    gap: var(--space-xs);
    align-items: center;
    display: flex;
  }

  #orders-page .order-shipment {
    margin: var(--space-xs) 0;
    padding: var(--space-xs);
    background-color: var(--card-bg-secondary);
    border-radius: var(--border-radius);
  }

  #orders-page .shipment-header {
    margin-bottom: var(--space-xs);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #orders-page .shipment-meta {
    gap: var(--space-xs);
    font-size: var(--step--1);
    flex-wrap: wrap;
    align-items: center;
    display: flex;
  }

  #orders-page .order-items {
    margin: var(--space-xs) 0 0;
    padding: 0;
    list-style: none;
  }

  #orders-page .order-item-detail {
    gap: var(--space-s);
    padding: var(--space-xs);
    border-bottom: 1px solid var(--border-color-light);
    display: flex;
  }

  #orders-page .order-item-detail:last-child {
    border-bottom: none;
  }

  #orders-page .order-item-image {
    flex-shrink: 0;
  }

  #orders-page .order-item-image img {
    object-fit: contain;
    background-color: var(--card-bg-color);
    width: 80px;
    height: 80px;
  }

  #orders-page .order-item-info {
    gap: var(--space-3xs);
    flex-direction: column;
    flex-grow: 1;
    display: flex;
  }

  #orders-page .order-item-name {
    color: var(--text-primary);
    font-weight: bold;
    text-decoration: none;
  }

  #orders-page .order-item-description {
    font-size: var(--step--1);
    color: var(--text-secondary);
    margin: 0;
  }

  #orders-page .order-item-price {
    white-space: nowrap;
    align-self: center;
    font-weight: bold;
  }

  #orders-page .order-seller--actions {
    justify-content: flex-end;
    gap: var(--space-s);
    margin-top: var(--space-s);
    display: flex;
  }

  #orders-page .status-completed {
    color: var(--color-success);
  }

  #orders-page .status-failed {
    color: var(--color-error);
  }

  #orders-page .status-delivered {
    color: var(--color-success);
  }

  #orders-page .status-transit {
    color: var(--color-info);
  }

  #orders-page .status-pre_transit {
    color: var(--color-warning);
  }

  #orders-page .shipment-cancelled {
    opacity: .7;
  }

  #orders-page .tracking-link {
    color: var(--color-primary);
    text-decoration: none;
  }

  #orders-page .cancellation-reason {
    color: var(--color-error);
  }

  #orders-page .pagination {
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    margin-top: var(--space-m);
    display: flex;
  }

  #orders-page .pagination-info {
    font-size: var(--step--1);
  }

  #orders-page .no-results {
    padding: var(--space-l);
    text-align: center;
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  @media (max-width: 768px) {
    #orders-page .order-header, #orders-page .order-seller--header, #orders-page .shipment-header {
      align-items: flex-start;
      gap: var(--space-3xs);
      flex-direction: column;
    }

    #orders-page .order-item-detail {
      flex-wrap: wrap;
    }

    #orders-page .order-item-price {
      margin-left: calc(80px + var(--space-s));
    }
  }

  #chats-page > * + * {
    margin-top: var(--space-s);
  }

  #chats-page .chats-container {
    grid-template-columns: 1fr 3fr;
    grid-template-areas: "chats chat";
    display: grid;
  }

  #chats-page .chats-container .chats {
    grid-area: chats;
    align-self: flex-start;
    position: sticky;
    top: 10px;
  }

  #chats-page .chats-container .chats > li {
    margin-top: var(--space-s);
    padding-right: var(--space-xs);
    list-style: none;
  }

  #chats-page .chats-container .chats > li > a {
    font-family: var(--font-p);
    column-gap: var(--space-2xs);
    display: flex;
  }

  #chats-page .chats-container .chats > li > a small {
    font-size: var(--step--2);
  }

  #chats-page .chats-container .chats > li .msg-count {
    background-color: var(--brand-red);
    white-space: nowrap;
    padding: var(--space-3xs);
    font-size: var(--step--2);
    color: #fff;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    width: 20px;
    height: 20px;
    margin-left: auto;
    display: flex;
  }

  #chats-page .chats-container .chats > li .msg-count > span {
    font-size: var(--step--1);
    padding-bottom: 5px;
  }

  #chats-page .chats-container .chats > li:after {
    content: "";
    margin-top: var(--space-s);
    background: url("/assets/svg/line.svg") center repeat-x;
    height: 3px;
    display: block;
  }

  #chats-page .chats-container .chats > li:last-child:after {
    content: none;
  }

  #chats-page .chats-container .chat {
    --input-bar-height: 100px;
    padding-top: var(--space-2xs);
    padding-bottom: var(--space-xs);
    grid-area: chat;
    align-self: flex-start;
    position: sticky;
    top: 10px;
  }

  #chats-page .chats-container .chat > header {
    text-align: center;
    background-color: var(--card-bg-color);
    position: sticky;
    top: 0;
  }

  #chats-page .chats-container .chat > header > h2 {
    font-size: var(--step-0);
    display: inline;
  }

  #chats-page .chats-container .chat > header > button {
    display: inline-block;
  }

  #chats-page .chats-container .chat > header:after {
    content: "";
    margin-top: var(--space-2xs);
    background: url("/assets/svg/line.svg") center repeat-x;
    height: 3px;
    display: block;
  }

  #chats-page .chats-container .chat .messages {
    max-height: 60vh;
    padding-top: var(--space-s);
    padding-bottom: calc(var(--input-bar-height)  + var(--space-s));
    overflow-y: scroll;
  }

  #chats-page .chats-container .chat .messages > li {
    width: fit-content;
    padding: var(--space-xs);
    border-radius: var(--space-3xs);
    list-style: none;
  }

  #chats-page .chats-container .chat .messages > li .body {
    font-size: var(--step--1);
    color: #fff;
  }

  #chats-page .chats-container .chat .messages > li .timestamp {
    padding-top: var(--space-3xs);
    color: #fff;
    width: fit-content;
    font-size: 14px;
    display: block;
  }

  #chats-page .chats-container .chat .messages > li.sent {
    background-color: var(--brand-purple);
  }

  #chats-page .chats-container .chat .messages > li.sent .timestamp {
    margin-left: auto;
  }

  #chats-page .chats-container .chat .messages > li.received {
    background-color: var(--brand-red);
    margin-left: auto;
  }

  #chats-page .chats-container .chat .input-bar {
    height: var(--input-bar-height);
    background-color: var(--card-bg-color);
    gap: var(--space-s);
    padding-top: var(--space-xs);
    padding-bottom: var(--space-xs);
    background-image: url("/assets/svg/line.svg");
    background-position: top;
    background-repeat: repeat-x;
    background-size: auto 3px;
    flex-direction: row;
    align-items: center;
    display: flex;
    position: sticky;
    bottom: 0;
  }

  #chats-page .chats-container .chat .input-bar > input {
    flex-grow: 1;
  }

  #seller-settings-page > * + * {
    margin-top: var(--space-s);
  }

  #seller-settings-page .settings-section:not(:first-child) {
    margin-top: var(--space-xl);
  }

  #seller-settings-page .free-shipping-form {
    margin-top: var(--space-s);
    max-width: 450px;
  }

  #seller-settings-page .free-shipping-form input {
    max-width: 20ch;
  }

  #seller-settings-page .carriers-list {
    margin-top: var(--space-m);
  }

  #seller-settings-page .carriers-grid {
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    display: grid;
  }

  #seller-settings-page .carrier-card {
    padding: var(--space-s);
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
  }

  #seller-settings-page .carrier-header {
    justify-content: space-between;
    align-items: baseline;
    display: flex;
  }

  #seller-settings-page .carrier-header h4 {
    font-family: var(--font-p);
    margin: 0;
  }

  #seller-settings-page .carrier-toggle {
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--step--1);
    display: flex;
  }

  #seller-settings-page .carrier-toggle input[type="checkbox"] {
    margin: 0;
  }

  #seller-settings-page .carrier-status {
    font-weight: 500;
  }

  #seller-settings-page #add-template-btn {
    margin-top: var(--space-s);
  }

  #seller-settings-page #add-template-modal {
    max-height: 90vh;
  }

  #seller-settings-page #template-form {
    padding: var(--space-xs);
    padding-top: var(--space-m);
  }

  #seller-settings-page #template-form > :not(:first-child, h4 + *) {
    margin-top: var(--space-s);
  }

  #seller-settings-page #template-form button[type="submit"] {
    margin-top: var(--space-m);
    width: 20ch;
    margin-left: auto;
  }

  #seller-settings-page .dimensions {
    column-gap: var(--space-xs);
    flex-direction: row;
    align-items: baseline;
    display: flex;
  }

  #seller-settings-page .dimensions > .dimension {
    min-width: 5ch;
    max-width: 10ch;
  }

  #seller-settings-page .dimensions > .unit {
    min-width: 9ch;
  }

  #seller-settings-page .dimensions > .dimension-divider {
    user-select: none;
    align-self: flex-end;
  }

  #seller-settings-page .weight-group {
    column-gap: var(--space-s);
    flex-direction: row;
    align-items: baseline;
    display: flex;
  }

  #seller-settings-page .weight-group > input {
    min-width: 50ch !important;
  }

  #seller-settings-page .weight-group .weight-unit + * {
    margin-left: var(--space-s);
  }

  #seller-settings-page .templates-list {
    margin-top: var(--space-m);
  }

  #seller-settings-page .templates-list h3 {
    margin-bottom: 1rem;
  }

  #seller-settings-page .templates-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    display: grid;
  }

  #seller-settings-page .template-card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1rem;
  }

  #seller-settings-page .template-header {
    justify-content: space-between;
    align-items: center;
    margin-bottom: .5rem;
    display: flex;
  }

  #seller-settings-page .template-header h4 {
    font-family: var(--font-p);
    margin: 0;
  }

  #seller-settings-page .template-actions {
    gap: .5rem;
    margin-top: 0;
    display: flex;
  }

  #seller-settings-page .template-weight {
    row-gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #seller-settings-page .template-details {
    color: #666;
    row-gap: var(--space-xs);
    flex-direction: column;
    font-family: monospace;
    font-size: .9rem;
    display: flex;
  }

  #seller-settings-page .template-edit-form {
    margin-top: 1rem;
  }

  #seller-settings-page .edit-dimensions {
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem;
    margin-bottom: 1rem;
    display: grid;
  }

  #seller-settings-page .edit-actions {
    gap: .5rem;
    display: flex;
  }

  #seller-orders-page > * + * {
    margin-top: var(--space-s);
  }

  #seller-orders-page .orders-header {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-s);
    margin-bottom: var(--space-m);
    flex-wrap: wrap;
    display: flex;
  }

  #seller-orders-page .orders-header h1 {
    margin: 0;
  }

  #seller-orders-page .orders-header .orders-filters {
    gap: var(--space-s);
    align-items: center;
    display: flex;
  }

  #seller-orders-page .orders-header .orders-filters form {
    margin: 0;
  }

  #seller-orders-page .orders-list {
    max-width: 100%;
    padding-left: 0;
    list-style-type: none;
  }

  #seller-orders-page .orders-list > li {
    padding-left: 0;
    list-style: none;
  }

  #seller-orders-page .order-card {
    background-color: var(--card-bg-color);
  }

  #seller-orders-page .order-card .order-summary {
    display: flex;
  }

  #seller-orders-page .order-card .order-summary .order-basic-info {
    column-gap: var(--space-s);
    display: flex;
  }

  #seller-orders-page .order-card .order-summary :last-child {
    margin-left: auto;
  }

  #seller-orders-page .status-badge {
    padding: var(--space-3xs) var(--space-2xs);
    font-size: var(--step--2);
    text-transform: uppercase;
    border-radius: 4px;
    font-family: monospace;
    font-weight: 500;
    display: inline-block;
  }

  #seller-orders-page .status-badge.status-processing {
    color: #374151;
    background-color: #f3f4f6;
  }

  #seller-orders-page .status-badge.status-pending {
    color: #92400e;
    background-color: #fef3c7;
  }

  #seller-orders-page .status-badge.status-shipped {
    color: #1e40af;
    background-color: #dbeafe;
  }

  #seller-orders-page .status-badge.status-delivered {
    color: #065f46;
    background-color: #d1fae5;
  }

  #seller-orders-page .status-badge.status-cancelled, #seller-orders-page .status-badge.status-failed {
    color: #991b1b;
    background-color: #fee2e2;
  }

  #seller-orders-page .status-badge.status-mixed {
    color: #92400e;
    background-color: #fef3c7;
    border: 1px solid #f59e0b;
  }

  #seller-orders-page .buyer {
    padding-left: var(--space-s);
  }

  #seller-orders-page .buyer > :not(:first-child) {
    margin-left: var(--space-3xs);
  }

  #seller-orders-page .order-overview {
    padding: var(--space-m);
    background-color: var(--background-body);
    margin-bottom: var(--space-m);
    gap: var(--space-m);
    border-radius: 6px;
    grid-template-columns: 1fr 1fr 1fr;
    display: grid;
  }

  @media (max-width: 768px) {
    #seller-orders-page .order-overview {
      grid-template-columns: 1fr;
    }
  }

  #seller-orders-page .order-overview h4 {
    margin: 0 0 var(--space-s) 0;
    font-size: var(--step--1);
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: .5px;
  }

  #seller-orders-page .order-overview .buyer-info .buyer-name {
    font-weight: 600;
    font-size: var(--step-0);
    margin-bottom: var(--space-xs);
    display: block;
  }

  #seller-orders-page .order-overview .buyer-info .buyer-actions {
    font-size: var(--step--1);
  }

  #seller-orders-page .order-overview .buyer-info .buyer-actions a {
    color: var(--brand-blue);
    text-decoration: none;
  }

  #seller-orders-page .order-overview .buyer-info .buyer-actions a:hover {
    text-decoration: underline;
  }

  #seller-orders-page .order-overview .order-metadata {
    gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  #seller-orders-page .order-overview .order-metadata .ship-by-date {
    color: var(--brand-red);
    font-weight: 600;
  }

  #seller-orders-page .order-overview .payment-breakdown .breakdown-details {
    gap: var(--space-2xs);
    flex-direction: column;
    display: flex;
  }

  #seller-orders-page .order-overview .payment-breakdown .breakdown-row {
    font-size: var(--step--1);
    justify-content: space-between;
    display: flex;
  }

  #seller-orders-page .order-overview .payment-breakdown .breakdown-row.breakdown-total {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-2xs);
    color: var(--text-primary);
    font-weight: 600;
  }

  #seller-orders-page .transaction-items {
    margin-top: var(--space-m);
  }

  #seller-orders-page .transaction-items h4 {
    margin: 0 0 var(--space-s) 0;
    font-size: var(--step-0);
  }

  #seller-orders-page .transaction-items .item-quantity {
    font-size: var(--step--1);
    color: var(--text-secondary);
    margin-top: var(--space-3xs);
  }

  #seller-orders-page .order-details {
    margin-top: var(--space-xs);
    counter-reset: parcel 0;
  }

  #seller-orders-page .order-details > li {
    counter-increment: parcel;
  }

  #seller-orders-page .order-details > li:after {
    content: "";
    height: 3px;
    margin-top: var(--space-s);
    background: url("/assets/svg/line.svg") center / contain repeat-x;
    display: block;
  }

  #seller-orders-page .shipment-section {
    padding-inline: var(--space-s);
  }

  #seller-orders-page .shipment-section .shipment-header {
    margin-bottom: var(--space-s);
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #seller-orders-page .shipment-section .shipment-header h4 {
    font-size: var(--step-0);
    margin: 0;
  }

  #seller-orders-page .shipment-section .shipment-header h4:after {
    content: " " counter(parcel);
  }

  #seller-orders-page .shipment-section .shipment-header .shipment-info {
    gap: var(--space-s);
    font-size: var(--step--1);
    color: var(--text-secondary);
    display: flex;
  }

  #seller-orders-page .shipment-section .shipment-header .shipment-info .tracking-number {
    font-family: monospace;
    font-size: var(--step--2);
  }

  #seller-orders-page .shipment-section .shipment-header .shipment-info .ship-by-date {
    color: var(--brand-red);
    font-weight: 500;
  }

  #seller-orders-page .shipment-section .shipment-address {
    margin-bottom: var(--space-s);
    padding: var(--space-s);
    background-color: var(--background-body);
    border-radius: 4px;
  }

  #seller-orders-page .shipment-section .shipment-address address {
    margin-top: var(--space-3xs);
    font-style: normal;
    font-size: var(--step--1);
    line-height: 1.4;
  }

  #seller-orders-page .shipment-section .shipment-items h5 {
    margin: 0 0 var(--space-s) 0;
    font-size: var(--step--1);
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-secondary);
  }

  #seller-orders-page .shipment-section .shipment-items .items-list {
    gap: var(--space-s);
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;
  }

  #seller-orders-page .shipment-section .shipment-items .items-list .item-row {
    align-items: flex-start;
    gap: var(--space-s);
    padding: var(--space-s);
    border: 1px solid var(--background-body);
    border-radius: 4px;
    display: flex;
  }

  #seller-orders-page .shipment-section .shipment-items .items-list .item-row .item-image {
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    width: 60px;
    height: 60px;
  }

  #seller-orders-page .shipment-section .shipment-items .items-list .item-row .item-details {
    gap: var(--space-3xs);
    flex-direction: column;
    flex: 1;
    display: flex;
  }

  #seller-orders-page .shipment-section .shipment-items .items-list .item-row .item-details .item-name {
    font-family: var(--font-p);
  }

  #seller-orders-page .shipment-section .shipment-items .items-list .item-row .item-details .item-description {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #seller-orders-page .shipment-section .shipment-items .items-list .item-row .item-price {
    color: var(--brand-red);
    align-self: flex-start;
    font-weight: 500;
  }

  #seller-orders-page .shipment-section .shipment-actions {
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    border-top: 1px solid var(--background-body);
    gap: var(--space-s);
    justify-content: space-between;
    display: flex;
  }

  #seller-orders-page .shipment-section .shipment-status {
    margin-top: var(--space-s);
    padding: var(--space-s);
    background-color: #fee2e2;
    border-radius: 4px;
  }

  #seller-orders-page .shipment-section .shipment-status .cancelled-notice {
    color: var(--brand-red);
    font-weight: 500;
    font-size: var(--step--2);
  }

  #seller-orders-page .refund-notice {
    padding: var(--space-s);
    color: #92400e;
    font-size: var(--step--1);
    background-color: #fef3c7;
    border-radius: 4px;
  }

  #seller-orders-page .empty-state {
    text-align: center;
    padding: var(--space-xl);
    color: var(--text-secondary);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  #seller-orders-page .empty-state h3 {
    color: var(--text-primary);
  }

  #seller-orders-page .empty-state p {
    margin-bottom: var(--space-m);
  }

  #seller-orders-page .order-actions {
    margin-top: var(--space-s);
    padding-top: var(--space-s);
    justify-content: flex-end;
    display: flex;
  }

  #seller-orders-page .ms-modal {
    background-color: var(--card-bg-color);
    border-image: var(--card-border);
    max-width: 700px;
    margin: auto;
    padding: 0;
    box-shadow: 0 4px 6px #0000001a;
  }

  #seller-orders-page .ms-modal::backdrop {
    background-color: #00000080;
  }

  #seller-orders-page .ms-modal .modal-content {
    padding: var(--space-m);
  }

  #seller-orders-page .ms-modal .modal-content h2 {
    margin-top: 0;
    margin-bottom: var(--space-m);
  }

  #seller-orders-page .ms-modal .modal-content #refund-info {
    padding-top: var(--space-3xs);
    display: block;
  }

  #seller-orders-page .ms-modal .modal-content #refund-form {
    row-gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  #seller-orders-page .ms-modal .modal-content .modal-actions {
    margin-top: var(--space-l);
    gap: var(--space-s);
    justify-content: flex-end;
    display: flex;
  }

  #wishlist-page > * + * {
    margin-top: var(--space-s);
  }

  #wishlist-page > main > header {
    margin-bottom: var(--space-m);
  }

  #wishlist-page > main > header h1 {
    margin-bottom: var(--space-2xs);
  }

  #wishlist-page > main > header p {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #wishlist-page .wishlist-items {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  #wishlist-page .no-results {
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-s);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  #payouts-page #payouts > h1 {
    margin-bottom: var(--space-m);
  }

  #payouts-page #payouts {
    min-height: 500px;
  }

  #forgot-password-page {
    justify-content: center;
    display: flex;
  }

  #forgot-password-page main {
    row-gap: var(--space-s);
    flex-direction: column;
    flex-grow: 1;
    max-width: 500px;
    display: flex;
  }

  #forgot-password-page main form {
    row-gap: var(--space-m);
    flex-direction: column;
    display: flex;
  }

  #frequently-asked-questions-page main {
    margin-top: var(--space-l);
  }

  #frequently-asked-questions-page h1 {
    margin-bottom: var(--space-s);
    font-style: italic;
  }

  #frequently-asked-questions-page details {
    margin-top: var(--space-2xs);
  }

  #frequently-asked-questions-page details + * {
    margin-top: var(--space-xs);
  }

  #index-page main {
    margin-top: var(--space-m);
    padding-top: var(--space-m);
  }

  #index-page .hero-container {
    justify-content: center;
    align-items: center;
    row-gap: var(--space-xs);
    flex-direction: column;
    display: flex;
  }

  #index-page .hero-container .ms-btn-row {
    justify-content: flex-end;
  }

  #index-page .hero {
    width: 100%;
    max-width: max(600px, 1000px - 30vw);
    height: auto;
  }

  #index-page .btn-group {
    padding-top: var(--space-s);
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-s);
    width: 100%;
    display: flex;
  }

  #index-page section {
    width: 100%;
  }

  #index-page section h2 {
    font-style: italic;
    font-size: var(--step-2);
  }

  #index-page section:not(:last-child) {
    padding-bottom: var(--space-l);
    background-image: url("/assets/svg/line.svg");
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: auto 3px;
  }

  #index-page section:not(:first-child) {
    padding-top: var(--space-m);
  }

  #index-page .features {
    gap: var(--space-m);
    flex-direction: column;
    display: flex;
  }

  #index-page .why-miniswap {
    text-align: center;
    padding-bottom: var(--space-xs);
    font-family: var(--font-p);
    font-style: italic;
  }

  #index-page .buyers-sellers {
    gap: var(--space-l);
    flex-flow: wrap;
    justify-content: center;
    display: flex;
  }

  #index-page .buyers-sellers > * {
    flex: 1;
    min-width: 300px;
  }

  #index-page .buyers-sellers > * h2 {
    text-align: center;
  }

  #index-page .buyers-sellers .faq-button {
    place-self: center flex-end;
  }

  #index-page .discord {
    gap: var(--space-m);
    flex-flow: wrap;
    justify-content: space-between;
    align-items: center;
    display: flex;
  }

  #index-page .recent-listings {
    flex-direction: column;
    display: flex;
  }

  #index-page .recent-listings > ol {
    padding-top: var(--space-xs);
    gap: var(--space-xs);
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    display: grid;
  }

  #privacy-policy-page main {
    margin-top: var(--space-l);
    padding: var(--space-l);
    max-width: var(--content-max-width);
  }

  #shipping-policy-page main {
    margin-top: var(--space-m);
  }

  #shipping-policy-page main h2 {
    margin-top: var(--space-m);
  }

  #terms-of-service-page main {
    margin-top: var(--space-m);
  }

  #terms-of-service-page #-terms-of-service- {
    margin-bottom: var(--space-s);
    font-style: italic;
  }

  #verify-email-page {
    justify-content: center;
    align-items: flex-start;
    display: flex;
  }

  #verify-email-page main {
    margin-top: var(--space-m);
    flex-direction: column;
    flex-grow: 1;
    max-width: 500px;
  }

  #verify-email-page form {
    margin-top: var(--space-m);
    row-gap: var(--space-s);
    flex-direction: column;
    display: flex;
  }

  #verify-email-page form label {
    row-gap: var(--space-3xs);
    flex-direction: column;
    display: flex;
  }

  #verify-email-page form .resend {
    margin-right: auto;
  }

  #verify-email-page form #resend-message {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #verify-email-page form #resend-message:not(:empty) {
    display: block !important;
  }

  #seller-account-management h1 {
    margin-bottom: var(--space-m);
  }

  #sales-page {
    --nav-height: 56px;
    --border-color: #e0e0e0;
    --border-color-dark: #dee2e6;
    --sidebar-width: 420px;
    --sidebar-width-collapsed: 80px;
    --border-radius: 8px;
    --border-radius-sm: 4px;
    --border-radius-lg: 12px;
    --transition-speed: .2s;
    --status-warning-bg: #fff3cd;
    --status-warning-text: #856404;
    --status-danger-bg: #f8d7da;
    --status-danger-text: #721c24;
    --status-success-bg: #d4edda;
    --status-success-text: #155724;
    --status-info-bg: #cce5ff;
    --status-info-text: #004085;
    grid-column: full-start / full-end;
  }

  #sales-page .app-container {
    height: calc(100vh - var(--nav-height));
    display: flex;
  }

  #sales-page .dashboard-container {
    flex: 1;
    height: 100%;
    display: flex;
  }

  #sales-page .orders-list-panel {
    width: var(--sidebar-width);
    background: var(--card-bg-color);
    border-right: 1px solid var(--border-color);
    flex-direction: column;
    transition: width .3s;
    display: flex;
  }

  #sales-page .orders-list-panel.collapsed {
    width: var(--sidebar-width-collapsed);
  }

  #sales-page .orders-list-panel.collapsed .list-title, #sales-page .orders-list-panel.collapsed .order-item-header, #sales-page .orders-list-panel.collapsed .order-items-preview, #sales-page .orders-list-panel.collapsed .order-meta {
    display: none;
  }

  #sales-page .orders-list-panel.collapsed .order-item {
    padding: var(--space-2xs);
    text-align: center;
  }

  #sales-page .orders-list-panel.collapsed .list-header {
    padding: var(--space-2xs);
  }

  #sales-page .orders-list-panel .list-header {
    padding: var(--space-s);
    border-bottom: 1px solid var(--border-color);
    z-index: 10;
    background: #fff;
    position: sticky;
    top: 0;
  }

  #sales-page .orders-list-panel .list-header .list-title {
    font-size: var(--step-1);
    font-weight: 600;
  }

  #sales-page .orders-list-panel .orders-list {
    background: var(--card-bg-color);
    flex: 1;
    max-width: 100%;
    padding-left: 0;
    list-style-type: none;
    overflow-y: auto;
  }

  #sales-page .orders-list-panel .orders-list li {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
  }

  #sales-page .orders-list-panel .orders-list li.placeholder {
    text-align: center;
    padding: var(--space-s);
  }

  #sales-page .order-item {
    width: 100%;
    padding: var(--space-xs) var(--space-s);
    cursor: pointer;
    transition: background var(--transition-speed);
    background: #fff;
    border-bottom: 1px solid #eee;
    position: relative;
  }

  #sales-page .order-item:hover {
    background: var(--card-bg-color);
  }

  #sales-page .order-item.selected {
    padding-left: calc(var(--space-s)  - 3px);
    background: #e3f2fd;
    border-left: 3px solid #2196f3;
  }

  #sales-page .order-item:focus {
    outline-offset: -2px;
    outline: 2px solid #2196f3;
  }

  #sales-page .order-item .order-item-header {
    margin-bottom: var(--space-2xs);
    justify-content: space-between;
    align-items: start;
    display: flex;
  }

  #sales-page .order-item .order-item-header .order-number {
    font-weight: 100;
    font-size: var(--step--1);
    padding-right: var(--space-2xs);
    font-family: monospace;
  }

  #sales-page .order-item .order-item-header .order-date {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #sales-page .order-item .order-items-preview {
    gap: var(--space-2xs);
    margin-bottom: var(--space-2xs);
    align-items: center;
    display: flex;
  }

  #sales-page .order-item .order-items-preview .item-thumb {
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    border: 1px solid var(--border-color);
    width: 32px;
    height: 32px;
  }

  #sales-page .order-item .order-items-preview .items-count {
    font-size: var(--step--2);
    color: var(--text-secondary);
    margin-left: var(--space-3xs);
  }

  #sales-page .order-item .order-meta {
    font-size: var(--step--1);
    color: var(--text-secondary);
    justify-content: space-between;
    display: flex;
  }

  #sales-page .order-item .order-meta .order-total {
    color: var(--text-primary);
    font-weight: 600;
  }

  #sales-page .order-status-badge {
    font-size: var(--step--2);
    padding: var(--space-3xs) var(--space-2xs);
    border-radius: var(--border-radius-lg);
    font-weight: 500;
  }

  #sales-page .order-status-badge.status-shipped {
    background: var(--status-success-bg);
    color: var(--status-success-text);
  }

  #sales-page .order-status-badge.status-delivered {
    background: var(--status-info-bg);
    color: var(--status-info-text);
  }

  #sales-page .order-status-badge.ship-today {
    background: var(--status-danger-bg);
    color: var(--status-danger-text);
  }

  #sales-page .order-status-badge.ship-tomorrow {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
  }

  #sales-page .order-status-badge.ship-overdue {
    background: var(--brand-red-dark);
    color: #fff;
  }

  #sales-page .order-details-panel {
    background: var(--background-body);
    flex: 1;
    position: relative;
    overflow-y: auto;
  }

  #sales-page .order-details-panel .quick-actions-bar {
    border-bottom: 1px solid var(--border-color);
    padding: var(--space-xs) var(--space-m);
    z-index: 5;
    justify-content: space-between;
    align-items: start;
    gap: var(--space-xs);
    background: #fff;
    flex-wrap: wrap;
    display: flex;
    position: sticky;
    top: 0;
  }

  #sales-page .order-details-panel .quick-actions-bar .order-info {
    flex: 1;
    min-width: 200px;
  }

  #sales-page .order-details-panel .quick-actions-bar .order-info h1 {
    font-size: var(--step-1);
    margin: 0 0 var(--space-3xs) 0;
    font-weight: 600;
  }

  #sales-page .order-details-panel .quick-actions-bar .order-info .date {
    font-size: var(--step--1);
    color: var(--text-secondary);
  }

  #sales-page .order-details-panel .quick-actions-bar .actions-row {
    gap: var(--space-s);
    align-items: center;
    display: flex;
  }

  #sales-page .order-details-panel .details-content {
    max-width: 1000px;
    padding: var(--space-m);
    margin: 0 auto;
  }

  #sales-page .order-details-panel .details-content > section + section {
    margin-top: var(--space-m);
  }

  #sales-page .order-details-panel .details-content #payment-breakdown .ms-line {
    margin-top: var(--space-3xs);
    margin-bottom: var(--space-3xs);
  }

  #sales-page .btn {
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--step--1);
    cursor: pointer;
    transition: all var(--transition-speed);
    border: none;
    border-radius: 6px;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
  }

  #sales-page .btn.btn-primary {
    color: #fff;
    background: #2196f3;
  }

  #sales-page .btn.btn-primary:hover {
    background: #1976d2;
  }

  #sales-page .btn.btn-secondary {
    background: var(--card-bg-color);
    color: var(--text-primary);
    border: 1px solid var(--border-color-dark);
    text-wrap: nowrap;
  }

  #sales-page .btn.btn-secondary:hover {
    background: #e9ecef;
  }

  #sales-page .dropdown {
    display: inline-block;
    position: relative;
  }

  #sales-page .dropdown.open .dropdown-menu {
    display: block;
  }

  #sales-page .dropdown .dropdown-menu {
    margin-top: var(--space-3xs);
    z-index: 100;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    min-width: 180px;
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    box-shadow: 0 4px 12px #00000026;
  }

  #sales-page .dropdown .dropdown-item {
    width: 100%;
    padding: var(--space-2xs) var(--space-xs);
    font-size: var(--step--1);
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition-speed);
    background: none;
    border: none;
    display: block;
  }

  #sales-page .dropdown .dropdown-item:hover {
    background: var(--card-bg-color);
  }

  #sales-page .dropdown .dropdown-item.danger {
    color: var(--brand-red);
  }

  #sales-page .dropdown .dropdown-divider {
    height: 1px;
    margin: var(--space-3xs) 0;
    background: #eee;
  }

  #sales-page .ship-warning {
    background: var(--status-warning-bg);
    border-radius: var(--border-radius);
    padding: var(--space-xs);
    margin-bottom: var(--space-m);
    border: 1px solid #ffeaa7;
  }

  #sales-page .ship-warning .ship-warning-title {
    color: var(--status-warning-text);
    margin-bottom: var(--space-3xs);
    font-weight: 600;
  }

  #sales-page .ship-warning .ship-warning-text {
    font-size: var(--step--1);
    color: var(--status-warning-text);
  }

  #sales-page .parcel {
    padding: var(--space-s);
    margin-bottom: var(--space-xs);
  }

  #sales-page .parcel .parcel-header {
    margin-bottom: var(--space-xs);
    justify-content: space-between;
    align-items: start;
    display: flex;
  }

  #sales-page .parcel .parcel-header .parcel-title {
    font-weight: 600;
    font-size: var(--step-0);
  }

  #sales-page .parcel .parcel-header .parcel-subtitle {
    font-size: var(--step--1);
    color: var(--text-secondary);
    margin-top: var(--space-3xs);
  }

  #sales-page .parcel .items-container {
    background: var(--card-bg-color);
    padding: var(--space-2xs);
    margin-bottom: var(--space-2xs);
    border-radius: 6px;
  }

  #sales-page .parcel .items-container .item {
    gap: var(--space-2xs);
    padding: var(--space-2xs) 0;
    display: flex;
  }

  #sales-page .parcel .items-container .item + .item {
    border-top: 1px solid var(--border-color);
  }

  #sales-page .parcel .items-container .item .item-image {
    object-fit: cover;
    border-image: url("/assets/svg/frame.svg") 20 / 25px / 3px;
    width: 48px;
    height: 48px;
  }

  #sales-page .parcel .items-container .item .item-details {
    flex: 1;
  }

  #sales-page .parcel .items-container .item .item-details .item-name {
    font-weight: 500;
    font-size: var(--step--1);
  }

  #sales-page .parcel .items-container .item .item-details .item-variant {
    color: var(--text-secondary);
    font-size: var(--step--2);
  }

  #sales-page .parcel .items-container .item .item-price-col {
    text-align: right;
  }

  #sales-page .parcel .items-container .item .item-price-col .item-price {
    font-size: var(--step--1);
  }

  #sales-page .parcel .items-container .item .item-price-col .item-quantity {
    color: var(--text-secondary);
    font-size: var(--step--2);
  }

  #sales-page .fee-row {
    padding: var(--space-3xs) 0;
    font-size: var(--step--1);
    justify-content: space-between;
    display: flex;
  }

  #sales-page .fee-row.subtotal {
    font-weight: 600;
  }

  #sales-page .fee-row.total {
    font-size: var(--step-0);
    font-weight: 600;
  }

  #sales-page .fee-row .fee-negative {
    color: var(--brand-red);
  }

  #sales-page .fee-row .fee-positive {
    color: #28a745;
  }

  #sales-page .mobile-back-btn {
    display: none;
  }

  #sales-page .empty-state {
    height: 100%;
    color: var(--text-placeholder);
    text-align: center;
    padding: var(--space-l);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    display: flex;
  }

  #sales-page .empty-state .empty-state-icon {
    margin-bottom: var(--space-xs);
    opacity: .3;
    font-size: 48px;
  }

  #sales-page .loading {
    height: 200px;
    color: var(--text-placeholder);
    justify-content: center;
    align-items: center;
    display: flex;
  }

  #sales-page .loading:after {
    content: "Loading...";
  }

  @media (max-width: 1024px) {
    #sales-page .orders-list-panel {
      width: 350px;
    }
  }

  @media (max-width: 768px) {
    #sales-page .app-container {
      position: relative;
    }

    #sales-page .orders-list-panel {
      border-right: none;
      width: 100%;
    }

    #sales-page .order-details-panel {
      background: var(--background-body);
      z-index: 1000;
      transition: transform .3s;
      position: fixed;
      inset: 0;
      transform: translateX(100%);
    }

    #sales-page .order-details-panel.active {
      transform: translateX(0);
    }

    #sales-page .mobile-back-btn {
      color: #2196f3;
      font-size: var(--step--1);
      margin-right: var(--space-2xs);
      cursor: pointer;
      align-items: center;
      gap: var(--space-3xs);
      background: none;
      border: none;
      padding: 0;
      display: inline-flex;
    }

    #sales-page .order-details-panel .quick-actions-bar {
      padding-top: calc(env(safe-area-inset-top)  + var(--space-xs));
    }
  }

  body.order-details-open {
    width: 100%;
    position: fixed;
    overflow: hidden;
  }

  #edit-product-page .image-row {
    column-gap: var(--space-s);
    flex-direction: row;
    display: flex;
  }

  #seller-faq-page, #buyer-faq-page {
    justify-items: center;
  }

  #country-select-page {
    padding-top: var(--space-s);
    padding-bottom: var(--space-xl);
    margin-inline: var(--space-s);
  }

  #country-select-page .logo {
    margin-bottom: var(--space-s);
  }

  #country-select-page .countries {
    gap: var(--space-xl);
    padding-top: var(--space-m);
    grid-template-columns: 1fr 2fr;
    display: grid;
  }

  @media (max-width: 768px) {
    #country-select-page .countries {
      grid-template-columns: 1fr;
    }
  }

  #country-select-page .countries .other-regions {
    gap: var(--space-l);
    flex-direction: column;
    display: flex;
  }

  #country-select-page .countries section h2 {
    font-size: var(--step-0);
    font-family: var(--font-sc);
    color: var(--text-secondary);
    margin-bottom: var(--space-xs);
  }

  #country-select-page .countries section ol li {
    padding: 0;
    list-style: none;
  }

  #country-select-page .countries section ol li:not(:first-child) {
    margin-top: var(--space-xs);
  }

  #country-select-page .countries section ol li a {
    font-family: var(--font-p);
    align-items: flex-start;
    display: flex;
  }

  #country-select-page .countries section ol li a .ms-fi {
    margin-right: var(--space-2xs);
  }

  #country-select-page .countries section ol li a:hover {
    text-decoration: none;
  }

  #country-select-page .countries .europe ol {
    column-width: 200px;
    column-gap: var(--space-l);
  }

  @media (max-width: 768px) {
    #country-select-page .countries .europe ol {
      column-width: auto;
      columns: 1;
    }
  }

  #affiliate-landing-page main {
    text-align: center;
    flex-direction: column;
    justify-self: center;
    align-items: center;
    max-width: 600px;
    display: flex;
  }

  #affiliate-landing-page main h1 {
    margin-bottom: var(--space-2xs);
  }

  #affiliate-landing-page main form {
    margin-top: var(--space-l);
  }

  #affiliate-register-page main {
    flex-direction: column;
    justify-self: center;
    align-items: center;
    max-width: 700px;
    display: flex;
  }

  #affiliate-register-page main > p, #affiliate-register-page main span, #affiliate-register-page main li, #affiliate-register-page main ul, #affiliate-register-page main ol {
    width: 100%;
  }

  #affiliate-register-page main h1 {
    margin-bottom: var(--space-2xs);
  }

  #affiliate-register-page main h2 {
    margin-top: var(--space-m);
  }

  #affiliate-register-page main form {
    margin-top: var(--space-l);
  }

  #affiliate-register-page main .affiliate-link-container {
    text-align: center;
  }

  #saved-searches-page header p {
    color: var(--text-secondary);
  }

  #saved-searches-page .saved-searches-list {
    margin: 0;
    margin-top: var(--space-s);
    flex-direction: column;
    padding: 0;
    list-style: none;
    display: flex;
  }

  #saved-searches-page .saved-search-item {
    justify-content: space-between;
    align-items: center;
    gap: var(--space-m);
    padding: var(--space-s);
    border-image: url("/assets/svg/frame-2.svg") 10 / 12px;
    display: flex;
  }

  #saved-searches-page .saved-search-item:hover {
    background-color: #fff;
  }

  #saved-searches-page .saved-search-item .search-link {
    color: inherit;
    gap: var(--space-xs);
    flex-direction: row;
    flex: 1;
    align-items: center;
    text-decoration: none;
    display: flex;
  }

  #saved-searches-page .saved-search-item .search-description {
    color: var(--text-primary);
    text-wrap: wrap;
    max-width: 50ch;
    font-family: var(--font-p);
  }

  #saved-searches-page .saved-search-item .search-description:first-letter {
    text-transform: uppercase;
  }

  #saved-searches-page .saved-search-item .delete-btn:not(:hover) {
    color: var(--brand-red);
  }

  #saved-searches-page .saved-search-item .delete-btn:hover {
    color: var(--ms-error);
  }

  #saved-searches-page .no-results {
    justify-content: center;
    align-items: center;
    gap: var(--space-s);
    padding: var(--space-l);
    text-align: center;
    flex-direction: column;
    display: flex;
  }

  #saved-searches-page .no-results .hint {
    font-size: var(--step--1);
    color: var(--text-secondary);
    max-width: 50ch;
  }
}

@layer utilities {
  .ms-font-bold {
    font-weight: bold;
  }

  .ms-font-normal {
    font-weight: 400;
  }

  .ms-font-italic {
    font-style: italic;
  }

  .ms-text-center {
    text-align: center;
  }

  .ms-text-left {
    text-align: left;
  }

  .ms-text-right {
    text-align: right;
  }

  .ms-text-xs {
    font-size: var(--step--2);
  }

  .ms-text-sm {
    font-size: var(--step--1);
  }

  .ms-text-base {
    font-size: var(--step-0);
  }

  .ms-text-lg {
    font-size: var(--step-1);
  }

  .ms-text-xl {
    font-size: var(--step-2);
  }

  .ms-hidden {
    display: none;
  }

  .ms-sr-only {
    clip: rect(0, 0, 0, 0);
    border: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .ms-block {
    display: block;
  }

  .ms-inline {
    display: inline;
  }

  .ms-inline-block {
    display: inline-block;
  }

  .ms-flex {
    display: flex;
  }

  .ms-grid {
    display: grid;
  }

  .ms-mt-xs {
    margin-top: var(--space-xs);
  }

  .ms-mt-s {
    margin-top: var(--space-s);
  }

  .ms-mt-m {
    margin-top: var(--space-m);
  }

  .ms-mt-l {
    margin-top: var(--space-l);
  }

  .ms-mb-xs {
    margin-bottom: var(--space-xs);
  }

  .ms-mb-s {
    margin-bottom: var(--space-s);
  }

  .ms-mb-m {
    margin-bottom: var(--space-m);
  }

  .ms-mb-l {
    margin-bottom: var(--space-l);
  }

  .ms-ml-xs {
    margin-left: var(--space-xs);
  }

  .ms-ml-s {
    margin-left: var(--space-s);
  }

  .ms-mr-xs {
    margin-right: var(--space-xs);
  }

  .ms-mr-s {
    margin-right: var(--space-s);
  }

  .ms-p-xs {
    padding: var(--space-xs);
  }

  .ms-p-s {
    padding: var(--space-s);
  }

  .ms-p-m {
    padding: var(--space-m);
  }

  .ms-p-l {
    padding: var(--space-l);
  }

  .ms-px-s {
    padding-left: var(--space-s);
    padding-right: var(--space-s);
  }

  .ms-py-s {
    padding-top: var(--space-s);
    padding-bottom: var(--space-s);
  }

  .ms-loading-indicator {
    color: #6c757d;
    font-size: .9rem;
  }

  .ms-error-message {
    margin: var(--space-s) 0;
    padding: var(--space-s);
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
  }

  .ms-interactive-disabled {
    opacity: .5;
    cursor: not-allowed;
  }

  .ms-text-muted {
    color: #6c757d;
  }

  .ms-text-primary {
    color: var(--text-primary, #2c3e50);
  }

  .ms-text-error {
    color: var(--ms-error, #721c24);
  }
}